MVC数据通过ActionLink和/或表格

时间:2014-03-30 10:15:06

标签: javascript asp.net-mvc-4

这是与以下内容冲突的问题: 我有一个表单,用户插入数据,以及数据,有关于地理位置(地址,城市等)的信息。 使用此地理信息,当用户点击下一步(使用actionlink)时,我打开一个对话框(这是一个paritalview)并显示一个谷歌地图,其中插入了位置以供用户批准。 之后,当用户点击"批准"按钮,我想继续前进到另一个动作。

在使用actionlink时,我丢失了表单的所有数据。 如果我将actionlink更改为按钮提交,则部分视图根本不会打开。

问:这样做的原因是什么(这样的数据流和用户界面)?

这里附有一些代码: View.cshtml

 @using (Html.BeginForm())
     {         
        @Html.EditorFor(x => x.UserInfo)
     @Html.ActionLink("next", "GoogleApprove", "Create", null, new { id = "next", name =   
     "button", value = "next" })
         @*<input type="submit" name="button" id="next" value="next"    
      /<*@
      <div id="dialog"></div>
      }

        $(function () {
        $('#next').click(function () {
           var href = this.href;
           $('#dialog').dialog({
               modal: true,
               height: 720,
               width: 700,
               title 'Verify Location',
               open: function (event, ui) {
                   $(this).load(href, function (result) {
                       $('#googleFrom').submit(function () {
                           $.ajax({
                               url: this.action,
                               type: this.method,
                               data: $(this).serialize(),          
                               success: function (json) {
                                   $('#dialog').dialog('close');
                               }
                           });
                           return false;
                       });
                   });
               }
           });
           return false;
       });
       });

1 个答案:

答案 0 :(得分:1)

您可以使用提交按钮:

@using (Html.BeginForm("GoogleApprove", "Create", FormMethod.Post, new { id = "myForm" }))
{         
    @Html.EditorFor(x => x.UserInfo)
    <input type="submit" name="button" id="next" value="next" />
    <div id="dialog"></div>
}

然后在单独的javascript文件中订阅此表单的.submit事件并打开对话框:

$(document).on('submit', '#googleFrom', function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),          
        success: function (json) {
            $('#dialog').dialog('close');
        }
    });
    return false;
});

$(function() {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        height: 720,
        width: 700,
        title 'Verify Location',
        open: function (event, ui) {
            var form = $('#myForm');
            $.ajax({
                url: form.attr('actoin'),
                type: form.attr('method'), 
                data: form.serialize(),
                context: this,
                success: function(result) {
                    $(this).html(result);
                }
            });
        }
    });

    $('#myForm').submit(function() {
        $('#dialog').dialog('open');
        return false;
    });
});