jQuery Form plugin Обработка ASP.NET MVC 3 PartialView

Question

Я пишу страницу ASP.NET MVC для добавления продуктов. На странице отобразится форма с кнопкой Добавить, а также список продуктов. Когда пользователь нажимает кнопку «Добавить», я хочу, чтобы новый продукт был добавлен в список и сброс формы. Я пытаюсь сделать это с помощью плагина формы jQuery и без использования Ajax.BeginForm и т. Д. Я поместил список продуктов в частичное представление.

Класс продукта заключается в следующем:

public class Product 
{ 
    public int Id { get; set; } 
    public string Description { get; set; } 
    public decimal Price { get; set; } 
} 

Я использую ViewModel:

public class ProductViewModel 
{ 
    public ProductViewModel() 
    { 
    } 

    public ProductViewModel(AjaxDataEntryContext db) 
    { 
     Products = db.Products.ToList(); 
     NewProduct = new Product(); 
    } 
    public List<Product> Products { get; set;} 
    public Product NewProduct { get; set;} 
} 

Контроллер делает это:

public class ProductController : Controller 
{ 
    private AjaxDataEntryContext db = new AjaxDataEntryContext(); 

    [HttpGet] 
    public ViewResult AjaxForm() 
    { 
     return View(new ProductViewModel(db)); 
    } 

    [HttpPost] 
    public ActionResult AjaxForm(ProductViewModel viewModel) 
    { 
     db.Products.Add(viewModel.NewProduct); 
     db.SaveChanges(); 
     return PartialView("_ProductList", db.Products.ToList()); 
    } 
} 

Мой cshtml выглядит следующим образом:

@model AjaxDataEntry.ViewModels.ProductViewModel 
@{ 
    ViewBag.Title = "Index"; 
} 
@Html.Partial("_ProductList", Model.Products) 
@using (Html.BeginForm("AjaxForm", "Product", null, FormMethod.Post, new { id = "myForm1" })) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Product</legend> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.NewProduct.Description) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.NewProduct.Description) 
      @Html.ValidationMessageFor(model => model.NewProduct.Description) 
     </div> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.NewProduct.Price) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.NewProduct.Price) 
      @Html.ValidationMessageFor(model => model.NewProduct.Price) 
     </div> 
     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var options = { 
      target: '#producttable', // target element(s) to be updated with server response 
      beforeSubmit: showRequest, // pre-submit callback 
      success:  showResponse, // post-submit callback 
      replaceTarget: true, 
      dataType: html,  // 'xml', 'script', or 'json' (expected server response type) 
      clearForm: true  // clear all form fields after successful submit 
     }; 

     // bind form using 'ajaxForm' 
     $('#myForm1').ajaxForm(options); 
    }); 

    // pre-submit callback 
    function showRequest(formData, jqForm, options) { 
     var queryString = $.param(formData); 
     alert('About to submit: \n\n' + queryString); 
     return true; 
    } 

    // post-submit callback 
    function showResponse(responseText, statusText, xhr, $form) { 
     alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
     '\n\nThe output div should have already been updated with the responseText.'); 
    } 
</script> 

И, наконец, _ProductList частичное как указано в приведенной выше странице (и контроллер):

@model IEnumerable<AjaxDataEntry.Models.Product> 
<div id="producttable"> 
    <table> 
     <tr> 
      <th> 
       Description 
      </th> 
      <th> 
       Price 
      </th> 
      <th> 
      </th> 
     </tr> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.Description) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Price) 
       </td> 
       <td> 
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
        @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
        @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
       </td> 
      </tr> 
     } 
    </table> 
</div> 

Моя проблема заключается в том, что, когда я нажмите кнопку Добавить, продукт добавлены правильно, я вижу showRequest сообщение, но когда экран обновляется, все, что я вижу, это список, то есть частичный, а не полный вид. Я также не вижу сообщение showResponse.

Кто-нибудь знает, что я делаю неправильно?

Answer 1

ShowResponse не вызывается, потому что вы отправляете всю страницу, вместо использования Html.BeginForm(..., вы должны использовать Ajax.BeginForm(....