Question

更新问题

最近我需要在ASP.NET MVC 3中实现一个多步骤向导。经过一些研究，我能够找到这个解决方案。

http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

所以除了下面列出的小改动之外，我完全按照它的例子进行操作：

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>User</legend>
        <div class="wizard-step">
            @Html.Partial("UserInfo", this.Model)
        </div>
        <div class="wizard-step">
            @Html.Partial("Email", this.Model)
        </div>
        <div class="wizard-step">
            @Html.Partial("Cars", this.Model)
        </div>
        <p>
            <input type="button" id="back-step" name="back-step" value="< Back" />
            <input type="button" id="next-step" name="next-step" value="Next >" />
        </p>
    </fieldset>
}

正如您所看到的，我正在使用部分视图来呈现每个步骤。

然后我开始创建一个将用于此视图的ViewModel：

public class UserViewModel
    {
        public UserViewModel()
        {

        }

        [Required(ErrorMessage="Username")]
        public string UserName
        {
            get;
            set;
        }

        public string FirstName
        {
            get;
            set;
        }

        public string LastName
        {
            get;
            set;
        }

        public string Email
        {
            get;
            set;
        }

        public string Make
        {
            get;
            set;
        }

        public string Model
        {
            get;
            set;
        }
    }

在汽车部分视图中，我设置了以下代码：

@model MVC2Wizard.Models.UserViewModel
<div class="editor-label">
    @Html.LabelFor(model => model.Model)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Model)
    @Html.ValidationMessageFor(model => model.Model)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Make)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Make)
    @Html.ValidationMessageFor(model => model.Make)
</div>
<div>
    <p>
        <input id="addCar" type="submit" value="Add Car" />
    </p>
</div>
<script type="text/javascript">

    $("#addCar").click(function () {
        AddCars();
        return false;
    });

    function AddCars() {

        var model = @Html.Raw(Json.Encode(Model));

        $.ajax({

            url: '@Url.Action("AddCar")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({model: model}),
            success:function(result)
            {
                alert('successful');
            }

        });
    }

</script>

这是我的WizardController，它将在执行Action时被调用。

        // GET: /Wizard/

        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult Index(UserViewModel Person)
        {
            if (ModelState.IsValid)
                return View("Complete", Person);

            return View();
        }

        [HttpPost]
        public ActionResult AddCar(UserViewModel model)
        {
            return null;
        }

这就是我的问题： 除了执行操作时AddCar HTTPPost中的模型参数始终为null，一切都很有效！如何设置代码以便在HTTPPost期间传入用户输入。另外，我需要获取“Car”信息并将其添加到集合中。但那是第2步。

Answer 1

在CallSomeAction中执行此操作。

 var datatoPost = $('form').serialize();
 $.ajax({
 url: '@Url.Action("SomeAction")',  
 type: 'POST',  
 data: datatoPost,   
 dataType: 'json',
 success: function(result) {    
  }                 
 });

Answer 2

确保通过从回调中返回false来取消提交按钮的默认操作：

$('#addExperience').click(function() {
    CallSomeAction();
    return false; // <!-- that's important to prevent the form being submitted normally
});

更新：

最后你在这里显示了你的代码问题：

[HttpPost]
public ActionResult AddCar(UserViewModel model)

action参数名为model。但是你在UserViewModel内也有一个名为Model的属性，它是冲突的。默认模型绑定器不知道要绑定哪个绑定器。

所以有一种可能性就是重命名你的行动论点：

[HttpPost]
public ActionResult AddCar(UserViewModel uvm)

并在客户端：

data: JSON.stringify({ uvm: model })

更新2：

您的javascript中有以下行：

var model = @Html.Raw(Json.Encode(Model));

问题是WizardController中的GET Index操作没有将任何视图模型传递给视图：

[HttpGet]
public ActionResult Index()
{
    return View();
}

因此，当您查看生成的页面源代码时，您会注意到：

var model = null;

因此，您不能期望在null行动中获得AddCar以外的任何内容。

这就是说我想你不愿意将视图模型发送给这个动作。您愿意发送用户在表单中输入的2个值。

所以你可能想要这样的东西：

function AddCars() {
    $.ajax({
        url: '@Url.Action("AddCar")',
        type: 'POST',
        data: $('form').serialize(),
        success: function(result) {
            alert('successful');
        }
    });
}

Answer 3

var model = @ Html.Raw（Json.Encode（Model））;

单击“提交”按钮时，此行未运行，但是在呈现html页面时。您可以查看html源代码来观看它。

试试这个:(如果你的表单有一个名为'thisform'的id）

function CallSomeAction() {
    var model = {};
    $('#thisform').find("input[checked], input[type='text'], input[type='hidden'], input[type='password'], input[type='submit'], option[selected], textarea")
        .filter(":enabled")
        .each(function() {
            params[this.name || this.id || this.parentNode.name || this.parentNode.id] = this.value;
        });
    $.ajax({
        url: '@Url.Action("SomeAction")',
        type: 'POST',
        data: model,
        success: function (result) {
            // TODO: process the result from the server
        }
    });}

ajax回发不正常

3 个答案: