ASP.net MVC - How to setup a modal? - asp.net-mvc

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