назад сообщение не работает должным образом

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

Как вы можете видеть, я использую Partial View для рендеринга каждого шага.

Затем я приступил к созданию 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, который будет вызываться при выполнении действия.

        // 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 всегда равен нулю при выполнении действия!Как настроить код так, чтобы входные данные пользователя передавались во время HTTPPost.Также мне нужно взять информацию об автомобиле и добавить ее в коллекцию.Но это шаг 2.

Answer 1

Убедитесь, что вы отменили действие по умолчанию для кнопки отправки, вернув false из вашего обратного вызова:

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

---

ОБНОВЛЕНИЕ:

После того, как, наконец, вы показали свой код здесьпроблема:

[HttpPost]
public ActionResult AddCar(UserViewModel model)

Параметр действия называется model.Но у вас также есть свойство внутри UserViewModel, которое называется Model, что конфликтует.Связыватель модели по умолчанию не знает, какой из них связывать.

Таким образом, одна из возможностей - переименовать аргумент действия:

[HttpPost]
public ActionResult AddCar(UserViewModel uvm)

и на стороне клиента:

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

---

ОБНОВЛЕНИЕ 2:

В вашем javascript есть следующая строка:

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

Проблема в том, что ваше действие GET Index в WizardController не передает никакую модель представления в представление:

[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 2

В вашем CallSomeAction сделайте это.

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

Answer 3

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

Эта строка не запускается при нажатии кнопки отправки, но при отображении html-страницы.Вы можете просмотреть исходный HTML-код, чтобы просмотреть его.

Попробуйте это: (если ваша форма имеет идентификатор с именем 'thisform')

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