【问题标题】:MVC 5 - raise Bootstrap Modal from ControllerMVC 5 - 从控制器提升引导模式
【发布时间】:2015-06-02 15:18:06
【问题描述】:

从 WebForms 开始了解一些 MVC 的东西并不是很直观,我正在努力寻找一种从控制器弹出模式的方法(取决于回发结果)..

模态

<div id="PopupModal" class="modal fade in out">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                    <h4 class="modal-title" id="ModalTitle"></h4>
                </div>
                <div class="modal-body" id="ModalBody">
                    <h5 id="ModalBodyText"></h5>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>

这就是我在 WebForms 中提出事件的方式

Private Sub ModalValidation(Message As String)
        Try
            Dim SB As New StringBuilder
            SB.Append("$(document).ready(function(){")
            SB.Append("$('#PopupModal').modal();")
            SB.Append("var vBody = document.getElementById('ModalBodyText');")
            SB.Append("vBody.innerHTML = '" & Message & "';")
            SB.Append("var vTitle = document.getElementById('ModalTitle');")
            SB.Append("vTitle.innerHTML = 'Validation';")
            SB.Append("vTitle.style.color = 'orange';")
            SB.Append("});")
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ValidationShowModal", SB.ToString, True)
        Catch ex As Exception
            Dim vError As New SendError
            vError.MailError(60, PageName, ex)
        End Try
    End Sub

如何从控制器引发相同的事件?

谢谢

编辑 = 非常感谢 Vitor Salgado 为我指明了正确的方向

将此添加到控制器 - 索引

Function Index() As ActionResult
        Dim vPopup As New UploadFilesResult
        If Not Session("PopupMessage") Is Nothing Then
            vPopup.PopupMessage = Session("PopupMessage")
        Else
            vPopup.PopupMessage = "None"
        End If

        ViewData("UploadFilesResult") = vPopup
        Return View("BlueImpMinView")
    End Function

将此添加到控制器 - ActionResult(操作正常完成的地方)

Session("PopupMessage") = "The file was successfully uploaded!"
        Return Redirect("/blueimp/Index#Completed")

在视图中添加了一个隐藏字段

 @code
    Dim vPopup As MVPTest.UploadFilesResult = CType(ViewData("UploadFilesResult"), MVPTest.UploadFilesResult)
    Dim vPopupMessage As String = vPopup.PopupMessage
    @Html.TextBox("MessageTB", vPopupMessage, New With {.type = "hidden"})
End Code

和模态的javascript

<script>

window.onload = function () {
    var vType = location.hash;
    var vMessage = document.getElementById('MessageTB').value;
    switch (vType) {
        case '#Completed':
            //run code for completed modal

            $(document).ready(function () {
                $('#PopupModal').modal();
                var vBody = document.getElementById('ModalBodyText');
                vBody.innerHTML = vMessage;
                var vTitle = document.getElementById('ModalTitle');
                vTitle.innerHTML = 'Success';
                vTitle.style.color = 'green';
            });
            break;
        case '#Error':
            //run code for error modal

            break;
        case '#Validation':
            //run code for validation modal
    }


}


</script>

【问题讨论】:

  • 为什么要从控制器上提出来?你为什么要附加脚本?控制器应该以这种方式影响视图:它应该将任何必要的数据传递给视图,然后视图应该弄清楚如何显示自己(这可能涉及客户端代码)。确保您正确理解 MVC 架构以及 View 和 Controller 所扮演的角色以及它们应该如何交互。
  • 嗨 Mason - 控制器是执行所有数据处理的地方。我知道 ScriptManager 是 WebForms 而不是 MVC 的一部分,我只是想找到一种在数据处理完成后提升 Modal 的方法(或视情况而定)。我不得不说我还不太了解架构,但我几天前才开始学习——我学习的唯一方法就是开始尝试……
  • 我建议在您的控制器中进行验证,然后将模型(包括验证)传递给视图并让视图解决。
  • 如果我理解正确,您将数据发布到控制器,然后当再次呈现视图时,您想要显示模式。对吗?
  • 杰米——你能给我举个例子吗? - MarkPSmith - 正确

标签: asp.net asp.net-mvc twitter-bootstrap


【解决方案1】:

在控制器代码中,您可以在查询字符串中附加一些标记参数或返回特定的 cookie,然后,在您的 javascript 代码中,您可以识别这些标记值之一并显示您的模态窗口。

这里有一些示例代码..

控制器

public ActionResult Register()
{
    return View();
}

[HttpPost]
public ActionResult Register(RegisterModel model)
{
    return Redirect("/Home/Register#registered");
}

景色

@using (Html.BeginForm())
{
    <label>Login</label><br />
    @Html.TextBoxFor(x => x.Login)

    <br />

    <label>Name</label><br />
    @Html.TextBoxFor(x => x.Name)

    <br />

    <label>Email</label><br />
    @Html.TextBoxFor(x => x.Emai)

    <br />

    <input type="submit" value="Register" />
}

<script type="text/javascript">

    window.onload = function () {
        if (window.location.hash == '#registered') {
            alert('Your modal code here!');
        }
    };

</script>

操作 Register(POST) 是服务器端代码,它将为您的客户端代码创建一些标记。在示例中,a 向 url 添加了一个哈希值。您可以返回一个 cookie 值或更好,向隐藏字段添加一些值并从中读取值。在视图中,有一个在页面加载时执行的简单 JS 代码。 JS 搜索哈希值并显示模态。

【讨论】:

  • Vitor - 你能举例说明你的意思吗?我当然可以返回一个值,比如说,一个隐藏的文本框或使用一个会话变量,但是来自在代码隐藏中做所有事情我不确定如何在视图中捕获页面加载事件(或者即使可以这样做)
  • 这看起来像答案 :-) 午饭后会试一试,然后标记为这样。谢谢
【解决方案2】:

有几种方法可以满足 MVC 的处理方式。这就是我要做的...

如果您需要服务器决定是否显示模态,但又不想刷新页面,那么 AJAX 可能就是您想要的。使用可以使用 jQuery 的 ajax 调用将数据发布到控制器操作,在服务器上做出决定,然后发回您的 js 可以用来显示或不显示模式的结果。这样,页面不需要刷新,您就可以往返服务器来决定您需要做什么。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-02
    • 2014-01-09
    • 1970-01-01
    • 2017-09-01
    • 1970-01-01
    • 2015-04-14
    相关资源
    最近更新 更多