ASP.net MVC - How to setup a modal?

Question

I am really unsure how to do approach modal dialogs in ASP.NET MVC: The situation is as follows: In my home/index action method, I check if the user has already accepted the terms and conditions. If not, I want to show a dialog to prompt the user for a confirmation.

Now I am really unsure how to approach this in MVC: The possibilities I see:

1. Store a TaCConfirmNeeded property in ViewBag, in my view notice that the viewbag contains this token, display a jquery modal dialog with a form to confirm the terms and cond., and call account/confirmTA from this form.

2. Create a View in my shared folder, that uses my common layout, and is styled like a modal dialog, with a form which sends to account/confirmTA.

Is there a better/easier possibility?

Answer 1

This is how I implement a Modal Pop-Up in MVC. Hope it can help you.
Create a partial view (example):

@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>  

The controller it's gonna look like:

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

Later put this on your _Layout:

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

And your gonna need this script with a little jQuery to call it with AJAX from your view:

<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>