如何使用jQuery在MVC中发布viewmodel [英] How to post viewmodel in MVC using jquery

问题描述

我没有使用过Form元素. 我没有使用表格，因为，我不想回发..请指导我如何做ajax调用，从而能够将viewmodel传递给控制器​​的action方法获得$ .ajax吗? 我的表单如下所示:

I have not used Form element. I have not used form because, i don't want postback.. please guide me how do i do ajax call so, able to get $.ajax post the viewmodel to controller's action method ? My form is just look as follow:

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对象，则可以遵循以下示例:

You should collect the data from inputs manually and construct JSON object that correspond to your C# model class. For example if you wait ProductViewModel object in your action method you can follow this example:

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的默认值，您无需指定它.示例:

It's even easier if you have form element. Just select the form with jQuery and call serialize method. The data will be encoded as a string for submission. The format will be application/x-www-form-urlencoded; charset=UTF-8 that is the $.ajax default too and you won't need to specified it. Example:

var myData = $('#myFormId').serialize();
$.ajax({
    data: myData,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    //..Other ajax options
});

这篇关于如何使用jQuery在MVC中发布viewmodel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！