阿贾克斯回来后无法正常工作 [英] ajax post back not working correctly

问题描述

更新问题

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

Recently I need to implement a multi step wizard in ASP.NET MVC 3. After some research I was able to find this solution.

http://afana.me/post/create-向导在ASPNET-MVC-3.aspx

所以我跟着的例子完全一样有它除了下面列出的细微变化：

So I followed the example exactly as the have it except the minor changes listed below:

@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>
}

正如你可以看到我使用局部视图来渲染每一个步骤。

As you can see I am using Partial View to render each steps.

然后我继续创建将用于此视图视图模型：

Then I proceeded to create a ViewModel that would be used for this view:

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;
        }
    }

在汽车局部视图我有以下的code设置：

@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执行行动时将被调用。

Here is my WizardController that will get called when Action is performed.

        // 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模型参数一切都很正常总是空执行操作时！如何设置了code，使用户在输入过程中HTTPPost进入。此外，我也需要采取汽车的信息，并将其添加到一个集合。击打这是第2步。

SO HERE IS MY PROBLEM: Everything works great except the model parameter in the AddCar HTTPPost is always null when the action is performed! How do I set up the code so that the User Inputs are passing in during the HTTPPost. Also I need to take "Car" info and add it into a collection. Buts that's step 2.

推荐答案

请确保您从您的回调返回false取消提交按钮的默认操作：

Make sure you cancel the default action of the submit button by returning false from your callback:

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

---

更新：

最后在您看到您code，这里的问题：

After at last you have shown your code here's the problem:

[HttpPost]
public ActionResult AddCar(UserViewModel model)

的操作参数被称为模式。但你也有内部的 UserViewModel 属性被称为模式这是相互矛盾的。默认的模型粘合剂不知道要绑定哪一个。

The action parameter is called model. But you also have a property inside UserViewModel which is called Model which is conflicting. The default model binder doesn't know which one to bind.

所以，一种可能性是重命名你的行动的说法：

So one possibility is to rename your action argument:

[HttpPost]
public ActionResult AddCar(UserViewModel uvm)

和在客户端

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

---

更新2：

---

UPDATE 2:

您有以下线在JavaScript：

You have the following line in your javascript:

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

问题是，在你的WizardController GET指数操作不会传递任何视图模型视图：

The problem is that your GET Index action in WizardController doesn't pass any view model to the view:

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

所以，当你看到你的页面生成的源$ C ​​$ C，你会发现：

So when you look at the generated source code of your page you will notice:

var model = null;

正如你不能指望在你的 AddCar 行动获得比空以外的任何后果。

As a consequence you cannot expect to get anything other than null in your AddCar action.

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

This being said I suppose that you are not willing to send the view model to this action. You are willing to send the 2 values that the user entered in the form.

所以，你可能想是这样的：

So you probably want something like this:

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

这篇关于阿贾克斯回来后无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！