ASP.Net從ActionLink打開模態

Question

我有一個個人GPA跟蹤器項目，我正在嘗試從我的CRUD功能彈出一個模式。 我有半工作，它返回局部視圖，但不是模態形式。 我認為我的邏輯搞砸了，或者我沒有正確使用JQuery和Ajax。 任何幫助，將不勝感激。

這是我到目前為止所擁有的。

家庭控制器

 public ActionResult Edit(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Course course = _db.Courses.Find(id); if (course == null) { return HttpNotFound(); } return PartialView("_Edit", course); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit(Course course) { if (ModelState.IsValid) { _db.Entry(course).State = EntityState.Modified; _db.SaveChanges(); return RedirectToAction("Index"); } return View("Index"); } 

CourseList Partial從Index調用

  <td> @Html.ActionLink("Edit", "Edit", new { id = item.Id, @data_toggle="modal", @data_target="editCourseModal" } ) | @Html.ActionLink("Details", "Details", new { id = item.Id }) | @Html.ActionLink("Delete", "Delete", new { id = item.Id }) </td> 

CourseList中的腳本

 <script type="text/javascript"> $(function() { $('editCourseModal').on("click", function(e) { $('formEditCourse').load(this.href, function() { $('editCourseModal').modal({ keyboard: true }, 'show'); }) }) $("#editBtn").on("click", function() { $("#formEditCourse").submit(); }); $("#formEditCourse").on("submit", function(event) { var $form = $(this); var options = { url: $form.attr("action"), type: $form.attr("method"), data: $form.serialize() }; }); }); </script> 

編輯部分

 @model Project3.Models.Course <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div id="mainContent" class="modal-content col-sm-12"> <div id="myModalContent"></div> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Edit Course</h4> </div> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="modal-body"> <div class="form-horizontal"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(model => model.Id) <div class="form-group"> @Html.LabelFor(model => model.courseCode, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.courseCode, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.courseCode, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.courseName, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.courseName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.courseName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.courseHours, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.courseHours, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.courseHours, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.courseLetterGrade, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.courseLetterGrade, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.courseLetterGrade, "", new { @class = "text-danger" }) </div> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Cancel</button> <input class="btn btn-primary" type="submit" value="Save" /> </div> </div> </div> </div> } 

當我單擊CRUD操作時，它只是提取局部視圖，我有創建模式工作，之后我嘗試對所有CRUD操作進行建模，但無法將其用於將動態數據提取到字段中。

再次，任何幫助將不勝感激。

Answer 1

最后一條評論有幫助..

腳本：沒有正確綁定鏈接..

$(function () {
    $('.editCourseModal').on("click", function (e) {
        e.preventDefault();
        //perform the url load  then
            $('#myModal').modal({
                keyboard : true
            }, 'show');
        return false;
    })
})

html：標簽以前不在html屬性中..

@Html.ActionLink("Edit", "Edit", new { id = item.Id}, new { @class="editCourseModal", @data_target="editCourseModal"}) 

myModal div（僅限標簽），應與鏈接位於同一頁面上，以便當您單擊它時彈出。 但是在您的代碼中，您可以在“編輯”頁面中找到它。 我也找不到formEditCourse 。 不確定這些如何聯系起來。 我不熟悉的load用於加載編輯頁面。 如果它有效並且您感覺舒適，那么您應該繼續使用它。

---

其他/我的方法。 這樣我就可以加載這個modal所有部分頁面。 呈現/替換的頁面將根據鏈接進行更改。

在您的CourseList或索引頁面中

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div id="mainContent" class="modal-content col-sm-12">



        </div> 
    </div>
</div>

腳本：當用戶點擊#editCourseModal鏈接時，我們將阻止默認操作，並將#mainContnet div替換為通過ajax請求加載的_Edit部分頁面。 然后我們觸發show modal。

$(function () {
    $('.editCourseModal').on("click", function (e) {
        e.preventDefault();
        //replace the get with this.href to load the edit page
        $.get('https://developer.mozilla.org/en-US/docs/Web', function (data) {
            //replace the content returned
            $("#mainContent").html(data);
        });
        //show the modal
        $('#myModal').modal({
            keyboard : true,
        }, 'show');
        return false;
    })

})

編輯頁面：這仍然與您擁有的相同，但只包含頁眉，正文和頁腳。 您擁有的表格部分將保持不變...

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Edit Course</h4>
</div>

<div class="modal-body">
    //YOUR EXISTING FORM HERE
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal">Cancel</button>
    <input class="btn btn-primary" type="submit" value="Save" />
</div>

檢查此鏈接是否存在表單驗證問題。 讓我們知道怎么回事。