时间戳

首页 > 解决方案 > ASP.net MVC - 如何设置模式？

asp.net-mvc - ASP.net MVC - 如何设置模式？

问题描述

我真的不确定如何在 ASP.NET MVC 中处理模式对话框：情况如下：在我的 home/index 操作方法中，我检查用户是否已经接受了条款和条件。如果没有，我想显示一个对话框以提示用户确认。

现在我真的不确定如何在 MVC 中解决这个问题：我看到的可能性：

  1. 在 ViewBag 中存储 TaCConfirmNeeded 属性，在我看来，请注意 viewbag 包含此标记，显示带有表单的 jquery 模态对话框以确认条款和条件，并从此表单调用 account/confirmTA。

  2. 在我的共享文件夹中创建一个视图，该视图使用我的常用布局，其样式类似于模式对话框，并带有一个发送到 account/confirmTA 的表单。

有没有更好/更容易的可能性？

标签： asp.net-mvc

解决方案

这就是我在 MVC 中实现模态弹出窗口的方式。希望它可以帮助你。
创建局部视图（示例）：

@model CodeFirst.Models.FriendsInfo  
<div>  

<div class="modal-header">  
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
    <h4 class="modal-title" id="myModalLabel">FriendsInfo</h4>  
</div>                 


<hr />  
<dl class="dl-horizontal">  
    <dt>  
        @Html.DisplayNameFor(model => model.Name)  
    </dt>  

    <dd>  
        @Html.DisplayFor(model => model.Name)  
    </dd>  

    <dt>  
        @Html.DisplayNameFor(model => model.Mobile)  
    </dt>  

    <dd>  
        @Html.DisplayFor(model => model.Mobile)  
    </dd>  

    <dt>  
        @Html.DisplayNameFor(model => model.Address)  
    </dt>  

    <dd>  
        @Html.DisplayFor(model => model.Address)  
    </dd>  

</dl>

控制器看起来像：

public ActionResult Details(int Id)  
{  
    FriendsInfo frnds = new FriendsInfo();  
    frnds = db.FriendsInfo.Find(Id);  
    return PartialView("_Details",frnds);  
}

稍后把它放在你的 _Layout 上：

<div id='myModal' class='modal'>  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div id='myModalContent'></div>  
        </div>  
    </div>   
</div>

从你的角度来看，你需要这个带有一点 jQuery 的脚本来用 AJAX 调用它：

<script>  
var PostBackURL = '/Home/Details';  
$(function () {  
    // Use your logic, to call this function and replace the parameters like the User.ID
        debugger;  
        var id = User.Id;
        var options = { "backdrop": "static", keyboard: true };  
        $.ajax({  
            type: "GET",  
            url: PostBackURL ,  
            contentType: "application/json; charset=utf-8",  
            data: { "Id": id },  
            datatype: "json",  
            success: function (data) {  
                debugger;  
                $('#myModalContent').html(data);  
                $('#myModal').modal(options);  
                $('#myModal').modal('show');                    

            },  
            error: function () {  
                alert("Dynamic content load failed.");  
            }  
        });  
    });  
    //$("#closebtn").on('click',function(){  
    //    $('#myModal').modal('hide');    

    $("#closbtn").click(function () {  
        $('#myModal').modal('hide');  
    });
</script>

推荐阅读