Question

我有以下部分视图，我在ym manin视图中呈现： -

@model TMS.ViewModels.SwitchJoin
@using (Ajax.BeginForm("ChangeDevicesSwitch", "Switch", new AjaxOptions

{
    InsertionMode = InsertionMode.InsertBefore,
    UpdateTargetId = "result",
    LoadingElementId = "progress2",
    HttpMethod= "POST"
    ,
    OnSuccess = "createsuccess",
    OnFailure = "createfail"




}))
{

    @Html.AntiForgeryToken()

    @Html.HiddenFor(model=>model.Switch.SwitchID)
    <div>
<span class="f">@Html.DisplayNameFor(model => model.GeneralSwitchTo)</span>
@Html.DropDownListFor(model=>model.GeneralSwitchTo, Enumerable.Empty<SelectListItem>())
@Html.ValidationMessageFor(model =>model.GeneralSwitchTo) <span class="f">@Html.DisplayNameFor(model=>model.ShowSwitchNames) </span> @Html.RadioButtonFor(a=>a.ShowSwitchNames, "Tag", new { @id = "ChoiceTag2" })<span>Tag</span> 
@Html.RadioButtonFor(a=>a.ShowSwitchNames, "Name", new { @id = "ChoiceName2" }) <span>Name</span>  
    <input type="submit" value="Assign To Switch" class="btn btn-primary"/>    
    </div>

}
<p><img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress2" /></p>
<div id ="result"></div>

此部分视图仅包含下拉列表和两个单选按钮。但有没有办法显示包含此局部视图的对话框？因此，如果用户点击链接，例如＆＃34;显示更多选项＆＃34;，则填充包含此部分视图的对话框？

第二个问题，我需要在主视图上引用的脚本也可以在填充的对话框上工作

修改我在Razor视图中有以下函数，主要思想是在对话框中触发一个显示返回的html的函数： -

$(document).ready(function () {
        $("#loadview")(function() {
            //Make it a dialog box. Note that you don't have to do this every time the button is called, so you might want to make it dialog on document ready or something.

            $("#showoptions").dialog({
                title: "My Dialog",
                width: 400,
                height: 200
            });

            $.ajax({
                url: '@Url.Content("~/Switch/ShowOptions")',
                type: 'get',
                success: function (html) {
                    $('#dialogBox').html(html);
                    $("#dialogBox").dialog("show"); //This could also be dialog("open") depending on the version of jquery ui.
                }
            });
        })

并且应该触发脚本的按钮是： -

<input type="button"  value="Assign Devices To Another Switch" id="loadview" /> 
<div id="showoptions"></div>

但是目前当我点击链接时，不会显示任何对话框，我也会在Chrome控制台上收到以下错误： -

未捕获的TypeError：对象不是函数1484：602（匿名功能）1484：602 fire jquery-1.8.2.js：974 self.fireWith jquery-1.8.2.js：1082 jQuery.extend.ready jquery-1.8.2.js：406 DOMContentLoaded jquery-1.8.2.js：83不推荐使用event.returnValue。请改用标准的event.preventDefault（）。

任何人都可以建议可能出现的问题吗？感谢

Answer 1

动态加载需要使用ajax调用的部分视图

$('.btnSubmit').on('click', function(){
    $.ajax({
        url: '@Url.Action("Action", "Controller")',
        type: 'post',
        cache: false,
        async: true,
        data: { id: "ID" },
        success: function(result){
            $('.divContent').html(result);
            //load your dialog
        } 
    });
});

控制器上的

public PartialViewResult Action(int id){
    var model = //populate your model
    return PartialView("_PartialView", model);
}

对于您需要将事件与文档绑定的部分事件的点击事件

$(document).on('click', '.btnSubmit', function(){
    //your script here
});

Answer 2

Jquery UI Dialog Box Documentation

您需要做的是使用jquery ui对话框。基本上你所要做的就是将局部视图的内容加载到div中，并使div成为一个对话框。然后，您可以打开和关闭对话框。假设您显示的视图是您想要显示的部分，您需要在主视图中添加类似以下html的内容：

 <input type="button" onclick="LoadPartialView()" value="Open Dialog" />  
 <div id="dialogBox"></div>

这里我添加了一个onclick事件处理程序并创建了一个名为dialogBox的div。该框将成为对话框。

function LoadPartialView(){
   //Make it a dialog box. Note that you don't have to do this every time the button is called, so you might want to make it dialog on document ready or something.

   $("#dialogBox").dialog({
    title: "My Dialog",
    width: 400,
    height: 200
    });

    $.ajax({
    url: 'SomeActionName',
    type: 'post',
    success: function(html){
        $('#dialogBox').html(html);
        $("#dialogBox").dialog("show"); //This could also be dialog("open") depending on the version of jquery ui.
   } 
});

}）;

现在您还需要使用$（＆＃34;＃dialogBox＆＃34;。）。对话框（＆＃34;关闭＆＃34;）以关闭该框。

Answer 3

当您点击＆＃34;显示更多选项＆＃34;以下代码将在jquery ui对话框中呈现您的局部视图链接在主页上。

您的HTML看起来就像在主视图中一样

<div id="wodialog"></div>
@Html.ActionLink("Show More Options", "MoreDetails", "SummaryReport",
                    new { param = "Some value" },
                    new { @class = "wodetail" })

和主视图中的脚本

$(function () {
    $('#wodialog').dialog({
        title: "More Options",
        autoOpen: false,
        width: 500,
        height: 400,
        resizable: true,
        modal: false
    });

    $('.wodetail').click(function () {
        $('#wodialog').load(this.href, function () {
            $(this).dialog('open');
        });
        return false;
    });
});

并且控制器操作应该返回局部视图

public ActionResult MoreDetails(string param)
{
     return PartialView("_ChangeDevicesSwitchPartial", model);
}

显示对话框而不是局部视图

3 个答案: