弹出窗口触发Action后查看不刷新

时间:2013-08-15 18:40:14

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

我目前正在使用MVC4和Jquery Mobile为iPad构建移动应用程序。我有一个弹出框,由一个jquery函数打开(一个函数由用户点击页面上的项目触发,该页面位于视图中的iFrame内)。弹出窗口出现后,用户可以单击“是”或“否”(作为确认)。如果用户单击“是”,我将在我的控制器中触发一个Action,以便进行一些数据库工作。一旦Action的工作完成,我将返回到我开始的同一个View,只返回我现在想要显示的模型中的新信息。 其中大部分都有效。

正确触发弹出窗口,单击“是”时会正确触发操作,我可以单步执行操作,看到我的数据库工作正确完成并使用新信息重新加载模型。我甚至可以单步执行并看到它在返回View时调用正确的视图,并且新模型信息正在到达HTML帮助程序。

但是,Safari中的页面永远不会刷新。它仍然和我参加我的行动之前一样。我甚至试图完全返回另一个视图以查看是否会导致它刷新,但旧页面仍然固执地存在。

以下是我视图中的相关代码(WOTest):

@section Header 
{
   <script type="text/javascript">
        $(document).ready(function () {
            $('#popupSubmit').bind('click', function () {
                 $.post('@Url.Action("LoadTestData", "WO")', 
                 {CompKey:lblCompKey.innerHTML, ServiceRequestNumber:lblServiceRequestNum.innerHTML}); 
               });                              
        });



        function newWorkOrder(compkey, comptype, unitid) {
                        $('#popupDialog').popup('open');
                        $('#lblCompKey').html(compkey);
                        $('#lblCompType').html("CompType: " + comptype);
                        $('#lblUnitID').html("Unit ID: " + unitid);
       }


    </script>     
}

@section Content 
{ 
    <div data-role="content" data-theme="c">
        @using (Html.BeginForm("CreateSRTemp", "WO", FormMethod.Post))
        {           

            <div class="ui-grid-c" style="margin-bottom:6px;">  
                <div class="ui-block-a" style="width:32%; padding-right:2%;">  
                    <label id="lblAddress" style="font-weight:bold; color:#28608E;">Asset Address:<br /></label> 
                    @Html.TextBox("AssetAddress", Model.AssetAddress, new Dictionary<string, object>() { 
                    { "readonly", "true" }, { "data-mini", "true" } })  
                </div> 
                <div class="ui-block-b" style="width:22%; padding-right:2%;"> 
                    <label id="lblAsset" style="font-weight:bold; color:#28608E;">Asset:<br /></label>
                    @Html.TextBox("Asset", Model.Asset, new Dictionary<string, object>() { 
                    { "readonly", "true" }, { "data-mini", "true" } }) 
                </div> 
                <div class="ui-block-c" style="width:15%; padding-right:2%;">  
                    <label id="lblAssetID" style="font-weight:bold; color:#28608E;">Asset ID:<br /></label>
                    @Html.TextBox("AssetID", Model.AssetID, new Dictionary<string, object>() { 
                    { "readonly", "true" }, { "data-mini", "true" } })   
                </div> 
                <div class="ui-block-d" style="width:31%;">  
                    <label id="lblLogComment" style="font-weight:bold; color:#28608E;">Log Comment:<br /></label>
                    @Html.TextArea("LogComment", new Dictionary<string, object>() { { "data-mini", "true" } })   
                </div> 
            </div>  
            <div class="ui-grid-c"> 
                <div class="ui-block-a" style="width:25%; margin-top:8px;">
                    <label id="lblAssignedTo" style="font-weight:bold; color:#28608E;">Assigned To:<br /></label>
                     @Html.DropDownList("assignedTo", Model.listOfActiveEmps, "Select Employee", new { data_mini = "true" }) 
                </div> 
                <div class="ui-block-b" style="width:20%; margin-left:5px; margin-top:8px;">
                   <label id="lblPriority" style="font-weight:bold; color:#28608E;">Priority:<br /></label> 
                   @Html.DropDownList("priority", Model.listOfPriorities, "Select Priority", new { data_mini = "true" }) 
                </div> 
                <div class="ui-block-c" style="width:25%; margin-top:8px; margin-left:5px;">
                   <label id="lblWOType" style="font-weight:bold; color:#28608E;">WO Type:<br /></label> 
                   @Html.DropDownList("woType", Model.listOfWOTypes, "Select WO Type", new { data_mini = "true" }) 
                </div> 
                <div id="divCreateButton" class="ui-block-d" style="float:right; margin-top:27px;">                  
                    <input id="btnCreateWO" data-mini="true" data-theme="b" type="submit" style="height:35px;" value="Create WO" />               
                </div> 
            </div>
        }      

        <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
            style="max-width:416px;" class="ui-corner-all">

                <div data-role="header" data-theme="a" class="ui-corner-top">
                    <h1>Asset Selection <label id="lblServiceRequestNum" style="text-align:left;  height:22px; font-size:14px;">@Model.ServiceRequestNumber</label> </h1>
                </div> 
                <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">      
                    <h3 class="ui-title" style="text-align:center; height:22px;">Are you sure?</h3>                             
                    <label id="lblCompKeyLabel" style="text-align:left;  height:22px; font-size:14px; margin-left:95px;">Comp Key: </label>                  
                    <label id="lblCompKey" style="text-align:left;  height:22px; font-size:14px;"></label>  
                    <label id="lblCompType" style="text-align:left;  height:22px; font-size:14px; margin-left:95px;"></label>                   
                    <a id="popupSubmit" data-role="button" data-inline="true" data-rel="back"
                    data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a>
                    <a href="#" data-role="button" data-inline="true" data-rel="back" 
                        data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a> 
                </div> 

        </div>         

    </div>  
    <h5>@ViewBag.Message</h5>             

    <div class="ui-grid-solo"> 
        <div id="mapDiv" class="ui-block-a" style="margin-top:8px; width:100%;">  
            @{  
                string xPoint = "?xPoint=" + @Model.XCoordinate;
                string yPoint = "&yPoint=" + @Model.YCoordinate;
                string _uri = "/test/Map.htm" + xPoint + yPoint;
                if (Request.IsLocal)
                    _uri = "../../Map.htm" + xPoint + yPoint; 
                <iframe id="mapIframe" width="100%" src="@_uri"></iframe>
             }  
        </div> 
    </div>

弹出窗口在WOController中调用此Action:

    [HttpPost]
    public ActionResult LoadTestData(string CompKey, string ServiceRequestNumber)
    {
       //Do Database stuff, load model properties with new info
       return View("WOTest", srModel); 

     }

此Action应返回与模型中的新信息相同的视图(WOTest)。我已逐步执行Action代码,它按预期工作。最后发送给WOTest的srModel有正确的新信息......任何人都有任何想法为什么它不在WOTest中显示?好像WOTest根本没有刷新。

我尝试过使用ModelState.Clear,但这没有帮助。

非常感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:0)

如果有人发现这一点,我最终通过将我需要更新的部分视图分成局部视图来解决我自己的问题。然后我在主视图(WOTest)中放置一个占位符div(#detailsDiv)。我还将Action(LoadTestData)更改为返回局部视图而不是返回主视图。所以,我改变了我的jquery,以便在点击弹出窗口的提交按钮时加载部分视图的模型数据,如下所示:

    $(function () {
        $("#popupSubmit").bind("tap", tHandler);

        function tHandler(event) {
            $.post('@Url.Action("LoadTestData", "WO")', { CompKey: lblCompKey.innerHTML, ServiceRequestNumber: lblServiceRequestNum.innerHTML }, 
            function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); });
        }
    });

不幸的是,这只能在桌面Safari中解决我的问题......我将不得不为iPad找到另一种解决方案。