MVC 3 Ajax.beginform submit - вызывает полную обратную передачу - PullRequest
Новая
       30

MVC 3 Ajax.beginform submit - вызывает полную обратную передачу

2 голосов
/ 18 июня 2011

Привет, я пытаюсь справиться с ajax.beginform, используя mvc 3.

У меня есть 2 формы: HTML.BeginForm, которая отлично работает, и Ajax.BeginForm в частичном представлении. Пост формы AJAX предназначен для добавления заметок к модели.

Проблема в том, что ajax submit отправляет всю страницу, включая HTML.BeginForm, в главном представлении и не выполняет асинхронную запись с примечанием.

Кто-нибудь может увидеть, что я делаю не так?

Я смотрю на другие вопросы и отключил ненавязчивый JavaScript в web.config и т. Д.

Вид: 

<div id="maincontent">
@using (Html.BeginForm())
{
  @Html.ValidationSummary(true)
  <fieldset>
    <legend>Edit Franchise</legend>
    <div class="editor-label">
      @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.Name)
      @Html.ValidationMessageFor(model => model.Name)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.FirstLine)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.FirstLine)
      @Html.ValidationMessageFor(model => model.FirstLine)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.SecondLine)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.SecondLine)
      @Html.ValidationMessageFor(model => model.SecondLine)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.City)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.City)
      @Html.ValidationMessageFor(model => model.City)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.Postcode)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.Postcode)
      @Html.ValidationMessageFor(model => model.Postcode)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.Telephone)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.Telephone)
      @Html.ValidationMessageFor(model => model.Telephone)
    </div>
    <p class="clear">
      <input type="submit" value="Save" />
    </p>
  </fieldset>

  @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())

}

Частичное представление: 

@model Cash4Schools.Domain.Model.Note
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>  

@using (Ajax.BeginForm("AddNote", "Franchises", 
  new AjaxOptions {
     HttpMethod = "POST", 
     UpdateTargetId = "note" }, 
     new { id = "ajaxForm" })
     )
{
  @Html.ValidationSummary(true)
   <fieldset>
       <legend>Add a Note</legend>

      <div class="editor-label">
        @Html.LabelFor(model => model.Content)
      </div>
      <div class="editor-field">
        @Html.EditorFor(model => model.Content)
        @Html.ValidationMessageFor(model => model.Content)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.CreationDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CreationDate)
        @Html.ValidationMessageFor(model => model.CreationDate)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.CreatedBy)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CreatedBy)
        @Html.ValidationMessageFor(model => model.CreatedBy)
    </div>

    <p class="clear">
        <input type="submit" value="Add" />
    </p>
</fieldset>

}

Контроллер: 

[HttpPost]
public ActionResult AddNote(Note model)
{
  var franchise = _franchiseRepository.FindById(model.Id);

  franchise.Notes.Add(
    new Note {
      Content = model.Content,
      CreationDate = DateTime.Now,
      CreatedBy = model.CreatedBy,
      Type = NoteType.Franchise
    }
  );

  _franchiseRepository.Save(franchise);

  return PartialView(franchise.Notes);
}

Вывод HTML: 

<form action="/Franchises/AddNote?Length=10" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#note" id="ajaxForm" method="post">    <fieldset>
    <legend>Add a Note</legend>
    <div class="editor-label">
        <label for="Content">Content</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="Content" name="Content" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Content" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="CreationDate">CreationDate</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-required="The CreationDate field is required." id="CreationDate" name="CreationDate" type="text" value="01/01/0001 00:00:00" />
        <span class="field-validation-valid" data-valmsg-for="CreationDate" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="CreatedBy">CreatedBy</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="CreatedBy" name="CreatedBy" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="CreatedBy" data-valmsg-replace="true"></span>
    </div>

    <p class="clear">
        <input type="submit" value="Add" />
    </p>

</fieldset>
</form><div id="note"></div>

Ответы [ 2 ]

5 голосов
/ 18 июня 2011 
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>

    </fieldset>

    @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())
    --Partial call and therefore, the form within the partial, is embedded 
    --in the main form
}

изменить на 

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
    ....
    </fieldset>

}

@Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())
--Partial call outside main form, no longer embedded. Works

Вложенная форма внутри формы портит работу.

1 голос
/ 18 июня 2011

Удалите вашу Ссылку на библиотеки Microsoft там и используйте только jQuery ... Что сейчас и так используется за кулисами. Включите ненавязчивый JavaScript и включите библиотеки, как в моем сообщении в блоге здесь, и он должен работать для вас просто отлично.

http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html

...