我没有使用过Form元素。我没有使用表格,因为,我不想回发..请指导我如何做ajax调用,从而能够将viewmodel传递给控制器的action方法获得$.ajax吗?我的表格如下所示:
Form
HTML:
@model comp.learn.data.Models.ProductViewModel @{ ViewBag.Title = "Create"; } <h2>Create</h2> <fieldset> <legend>ProductViewModel</legend> <div id="CreateDiv"> <div class="editor-label"> @Html.LabelFor(model => model.ProductName) </div> <div class="editor-field"> @Html.EditorFor(model => model.ProductName) @Html.ValidationMessageFor(model => model.ProductName) </div> <div class="editor-label"> @Html.LabelFor(model => model.Cost) </div> <div class="editor-field"> @Html.EditorFor(model => model.Cost) @Html.ValidationMessageFor(model => model.Cost) </div> <div class="editor-label"> @Html.LabelFor(model => model.Description) </div> <div class="editor-field"> @Html.EditorFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) </div> <div class="editor-label"> @Html.LabelFor(model => model.ProductTypeId) </div> <div class="editor-field"> @Html.DropDownList("ProductTypeId", "Choose item") @Html.ValidationMessageFor(model => model.ProductTypeId) </div> <div class="editor-label"> @Html.LabelFor(model => model.ProductTypeName) </div> <div class="editor-field"> @Html.EditorFor(model => model.ProductTypeName) @Html.ValidationMessageFor(model => model.ProductTypeName) </div> </div> <p> <input type="submit" value="Create" id="btnSubmit" /> </p> </fieldset> <div> @Html.ActionLink("Back to List", "Index") </div>
jQuery / JavaScript:
$.ajax( { url: '@Url.Action("CreateProduct","ProductManagement")', dataType: 'json', contentType: 'application/json; charset=utf-8', type: 'post', cache: false, data: ///what should i write here , success: function (data) { alert('final'); }, error: function (f1, f2, f3) { alert(f3); } });
您应该手动从输入中收集数据,并构造与C#模型类相对应的JSON对象。例如,如果您在操作方法中等待ProductViewModel对象,则可以遵循以下示例:
var myData = { productName: $('#ProductName').val(), cost: $('#Cost').val(), // .. and so on }; $.ajax({ data: JSON.stringify(myData), // .. the other ajax options });
如果您具有表单元素,则更加容易。只需使用jQuery选择表单并调用serialize方法。数据将被编码为字符串以便提交。格式也将application/x-www- form-urlencoded; charset=UTF-8是$ .ajax默认值,您无需指定它。例:
serialize
application/x-www- form-urlencoded; charset=UTF-8
var myData = $('#myFormId').serialize(); $.ajax({ data: myData, contentType: 'application/x-www-form-urlencoded; charset=UTF-8', //..Other ajax options });