如何以jquery对话框模型形式或引导弹出窗口显示CRUD视图

Question

 <script src="jquery-js"> $("._detailsInfo").click( function () { var Id = $(this).attr('Id'); $.ajax({ "url": "/Test/Details/"+Id, "type": "GET", "dataType": "html", success: function (response) { $('#myModal').modal(options); $('#myModal').modal('show'); }, failure: function (response) { alert(response.responseText); } }); }); </script> 

 @model BOL3.tbl_Appoiment_Diary <div class="modal fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-header"> <button type="button" class="close" data-dissmiss="modal" aria-hidden="true">x</button> <h4 class="modal-title" id="myModalLabel">Details</h4> <hr /> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.Title) </dt> <dd> @Html.DisplayFor(model => model.Title) </dd> </dl> </div> <p> @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) | @Html.ActionLink("Back to List", "Index") </p> </div> </div> 

 <td> @*@Html.ActionLink("Details", "Details", new { id = item.ID }) |*@ <button class="btn btn-info btn btn-xs _detailsInfo" id=" '+ item.ID +' ">Details</button> | @Html.Partial("_Details", new BOL3.tbl_Appoiment_Diary()) @*@Html.ActionLink("Details", "_Details", new { @class = "_detailsInfo", id = "'+item.ID+'" }) |*@ </td> 

Can anyone help me with this. Please keep in mind that I'm quite new working with Javascript and Jquery so any help is greatly appreciated. I tryied different methods from multiple websites but nothing worked. Here are some of the websites that I tryed:

jquery-dialog-with-aspnet-mvc , jquery-dialog , and many others, but nothing seems to work.

Here is what i tryed until now:

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

this is the controller part.

 <script src="jquery-js"> //$(function () { // $("#dialog").dialog({ // autoOpen: false, // modal: true, // title: "Details" // }); // $("#AppoimentDiary .details").click(function () { // var ID = $(this).closest("tr").find("td").eq(0).html(); // $.ajax({ // type: "POST", // url: "/Test/Details/", // data: '{ID: "' + ID + '"}', // contentType: "application/json; charset=utf-8", // dataType: "html", // success: function (response) { // $('#dialog').html(response); // $('#dialog').dialog('open'); // }, // failure: function (response) { // alert(response.responseText); // }, // error: function (response) { // alert(response.responseText); // } // }); // }); //}); //$(document).ready(function () { // $("#btnCreate").click(function () { // InitializeDialog($("#testdialog")); // $("#testdialog").dialog("open"); // }); // function InitializeDialog($element) { // $.dialog({ // autoOpen: false, // width: 400, // resizable: true, // draggable: true, // title: "Appointments", // model: true, // show: 'slide', // closeText: 'x', // dialogClass: 'alert', // closeOnEscape: true, // open: function (event, ui) { // $element.load('/Test/Add'); // }, // close: function () { // $(this).dialog('close'); // } // }); // } //}); //$.ajaxSetup({ cache: false }); //$(document).ready(function () { // $(".openPopup").live("click", function (e) { // e.preventDefault(); // $("<div></div><p>") // .addClass("dialog") // .attr("id", $(this) // .attr("data-dialog-id")) // .appendTo("body") // .dialog({ // title: $(this).attr("data-dialog-title"), // close: function () { $(this).remove(); }, // modal: true, // height: 250, // width: 900, // left: 0 // }) // .load(this.href); // }); // $(".close").live("click", function (e) { // e.preventDefault(); // $(this).closest(".dialog").dialog("close"); // }); //}); @*var url = '@Url.Action("Details", "Test")'; $('selector').load(url, { id: 1 });*@ </script> 

  @Html.ActionLink("Det", "Details", new { id = item.ID, @class = "data-toggle = 'modal' data-target = '#myModal' " }) | <div id="dialog" style="display: none"> </div> </div> @*<div id='myModal' class='modal'> <div class="modal-dialog"> <div class="modal-content"> <div id="myModalContent"></div> </div> </div> </div> <script src="jquery-js"> var TeamDetailPostBackURL = '/Test/Details'; $(function () { $(".anchorDetail").click(function () { debugger; var $buttonClicked = $(this); var id = $buttonClicked.attr('data-id'); var options = { "backdrop": "static", keyboard: true }; $.ajax({ type: "GET", url: TeamDetailPostBackURL, 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("Loading the data is not possible!"); } }); }); $("#closbtn").click(function () { $('#myModal').modal('hide'); }); }); </script>*@ @*<div class="modal fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" style="background-color:aqua"> <h4 class="modal-title">Ada New</h4> </div> <div class="modal-body"> @Url.Action("/Test/Details") </div> <div class="modal-footer" style="background-color:aqua"> <button type="button" class="btn btn-danger" data-dissmiss="modal">Close</button> <button type="button" data-dismiss="modal" class="btn btn-success">Save</button> </div> </div> </div> </div>*@ 

Any help on this topic is greatly appreciated.

Edit :

This is the index button, the script is from your answer:

in the same index view, and here is the partial view:

Answer 1

See, there is no need to call again details method from your modal body.

Create a modal inside partial view, and keep all your partial view HTML inside the modal body. And in top of your partial view, add your modal reference , like bellow,

@model Your_Project_Name.ModalFolderName.tbl_Appoiment_Diary

<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
 <div class="modal-dialog">
  <div class="modal-header">Details Info</div>
   <div class="modal-body">
    /*Here keep your all HTML to display details data*/
   </div>
  </div>
 </div>

Change or update the above HTML accordingly. And change the reference name with your project name and class name.

Create your Details button in your main view, like this,

<button class="btn btn-info _detailsInfo" id="'+item.ID+'"></Details>

While click this button call a jquery click function like bellow,

$("._detailsInfo").click(function () 
 {
  var Id = $(this).attr('Id');
  $.ajax({
        "url": "/Test/Details/"+Id,
        "type": "Get",
        "dataType": "html",
        success: function (response) {
                   $('#myModal').modal(options);
                   $('#myModal').modal('show');
                },
        failure: function (response) {
                    alert(response.responseText);
               }
           });
    });

Suppose your partial view name is _Details.cshtml. Then just render it inside your main view like this,(basically keep this bellow code before the close tag of body of your main view)

@Html.Partial("_Details", new tbl_Appoiment_Diary())

That's it! Hope it helps you.