Ajax в Asp.Net MVC странное поведение

Question

Моя наценка имеет один div с id= "divGrid" и включен один Аякса вид вне что div. Форма содержит два текстовых ввода и одну кнопку отправки с UpdateTargetId = "divGrid". Он прекрасно обновляет эту сетку, но добавляет на странице дублируемую форму с поддержкой ajax. Почему это? Как это исправить?

Вот мой Вид:

@model List<EF.Models.Data.Books> 

@{ 
    ViewBag.Title = "CodeFirst"; 
    Layout = null; 
} 
<script src="~/Scripts/jquery-1.8.2.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
<div id="divGrid"> 

     @foreach (var item in Model) 
     { 
     <table> 
      <tr> 
       <td>@item.ID</td> 
       <td>@item.Name</td> 
       <td>@item.Price</td> 
       </tr> 
      </table> 
      } 
    </div> 
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divGrid", InsertionMode = InsertionMode.Replace })) 
    { 
     @Html.TextBox("name"); 
     <br /> 
     @Html.TextBox("price"); 
     <input type="submit" value="Insert" />  
    } 

Мои действия контроллера:

[HttpPost] 
    public ViewResult CodeFirst(FormCollection form) 
    { 
     book.Name = form["name"]; 
     book.Price = Convert.ToDecimal(form["price"]); 
     context.Books.Add(book); 
     context.SaveChanges(); 
     result = context.Books.ToList(); 
     return View(result); 
    } 

Интересно, что мой оказал наценка что-то вроде

<div id="divGrid"> 
    <div id="divGrid"> 
    <!-- Data display as expected --> 
    </div> 
    <!-- ajax enabled form, that is out side of this in source code --> 
</div> 
<!-- ajax enabled form, that is out side of this in source code --> 

Answer 1

Ваш метод CodeFirst() возвращает тот же вид, который вы первоначально визуализировали, и его вставили внутри <div id="divGrid">, поэтому вы видите, что форма повторяется. Вам нужно вернуть отдельный частичный вид, содержащий только таблицу. Создать единственный метод отдельного ребенка, чтобы отобразить начальную таблицу

[ChildActionOnly] 
public ActionResult BookTable() 
{ 
    var model = context.Books; // no need for .ToList() 
    return PartialView(model); 
} 

BookTable.cshtml

@model IEnumerable<EF.Models.Data.Books> 
@foreach (var item in Model) 
{ 
    <table> 
    <tr> 
     <td>@item.ID</td> 
     <td>@item.Name</td> 
     <td>@item.Price</td> 
    </tr> 
    </table> 
} 

Затем создайте модель представления для добавления новой книги, так что вы можете воспользоваться функциями MVC, таких как сильный тип связывания, клиент и сервер проверки на стороне и т.д.

public class BookVM 
{ 
    [Required] 
    public string Name { get; set; } 
    public decimal Price { get; set; } 
} 

и вы контроллер методы становятся

public ActionResult CodeFirst() 
{ 
    BookVM model = new BookVM(); 
    return View(model); 
} 

[HttpPost] 
public ViewResult CodeFirst(BookVM model) 
{ 
    Book book = new Book(){ Name = model.Name, Price = model.Price }; 
    context.Books.Add(book); 
    context.SaveChanges(); 
    result = context.Books(); 
    return PartialView("BookTable", result); 
} 

и изменить ваш взгляд на

@model BookVM 
.... 
<div id="divGrid"> 
    @Html.Action("BookTable"); 
</div> 

@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divGrid", InsertionMode = InsertionMode.Replace })) 
{ 
    @Html.LabelFor(m => m.Name) 
    @Html.TextBoxFor(m => m.Name) 
    @Html.ValidationMessageFor(m => m.Name) 
    .... // ditto for Price 
    <input type="submit" value="Insert" />  
} 

Однако это означает, что ваш регенерации HTML для всей таблицы каждый раз вы передаете форму. Вы получите гораздо лучшую производительность, просто используя jquery и ajax, чтобы вызвать метод, который вставляет книгу и возвращает новый ID как json, затем динамически добавляя новую строку в таблицу на основе возвращаемого идентификатора и значения из текстовых полей в форма.