在MVC post动作中返回Jquery移动对话框

时间:2013-10-17 13:03:07

标签: asp.net-mvc asp.net-mvc-4 jquery-mobile

我正在使用JQuery Mobile 1.4和MVC 4来测试对话框。但是我不知道在对话后的行动中应该返回什么 有两个问题: 1.对话动作应该返回什么 2.对话框发布后,母版页中的输入数据将丢失

母版页查看代码:

@model MvcApplication4.Models.ViewModel

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TestDialog</title>
        <meta name="viewport" content="width=device-width" />
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <link href="/Content/site.css" rel="stylesheet"/>
        <link href="/Content/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" />

        <script src="/Scripts/modernizr-2.6.2.js"></script>
        <script src="/Scripts/jquery-2.0.3.js"></script>
        <script src="/Scripts/jquery-ui-1.10.3.js"></script>
        <script src="/Scripts/jquery.mobile-1.4.0-beta.1.js"></script>
    </head>
    <body>
        <div id="layoutPage" data-role="page" data-theme="a"> 
            <div id="layoutHeader" data-role="header">

                <h2>TestDialog</h2>
            </div> 

            <div id="layoutContent" data-role="content">
                @using (Html.BeginForm())
                {
                    <div>
                        <div class="editor-label">
                            @Html.LabelFor(model => model.IDDocument)
                        </div>
                        <div class="editor-field">
                            @Html.EditorFor(model => model.IDDocument)
                            @Html.ValidationMessageFor(model => model.IDDocument)
                        </div>    
                    </div>

                    <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <a id="addDetail"  href="@Url.Action("ShowDialog", "SampleTest")" data-rel="dialog" data-role="button" >Test dialog</a>
                    </div>                       
                }
            </div>
        </div>

        <script>
            $(document).on("mobileinit", function () {
                $.mobile.ajaxEnabled = false;
            });
        </script>

    </body>
</html>

对话框查看代码:

@model MvcApplication4.Models.ViewModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DialogView</title>
</head>
<body>
    <div id="detailPage1" data-role="dialog"  >  
        @using (Html.BeginForm("ShowDialogActioinPost", "SampleTest", FormMethod.Post))
        {
            <div data-role="header">
                <button type="submit" data-icon="check" class="ui-submit" data-inline="true" data-mini="true">Save</button>
                <h2 >Dialog Information</h2>
                <a data-rel="back" data-icon="back">Go back</a>

            </div> //end header

            <div data-role="content">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.SeqNo)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.SeqNo)
                        @Html.ValidationMessageFor(model => model.SeqNo)
                    </div>
            </div>
        }
    </div>

</body>
</html>

控制器代码:

    [HttpGet]
    public ActionResult ShowDialog()
    {
        return View("DialogView");
    }

    [HttpPost]
    public ActionResult ShowDialogActioinPost(ViewModel vm)
    {
        return View("Index");   // should return to master page,  but it doesn't work 
    }

由于 威尔逊

3 个答案:

答案 0 :(得分:0)

尝试使用RedirectToAction("Index");代替View("Index");

答案 1 :(得分:0)

您必须将模型返回到母版页。

[HttpPost]
public ActionResult ShowDialogActioinPost(ViewModel vm)
{
    return View("Index", vm);  
}

答案 2 :(得分:0)

答案是here

由于 威尔逊