Question

我有一个个人GPA跟踪器项目，我试图从我的CRUD函数中弹出一个模态。我有半工作，它返回局部视图，但不是模态形式。我认为我的逻辑搞砸了，或者我没有正确使用JQuery和Ajax。任何帮助，将不胜感激。

这是我到目前为止所拥有的。

家庭控制器

＆＃13;

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");
}

＆＃13;

从Index 调用的CourseList Partial

＆＃13;

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

＆＃13;

CourseList中的脚本

＆＃13;

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

＆＃13;

修改部分

＆＃13;

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

＆＃13;

＆＃13; 当我单击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>

检查此link是否存在表单验证问题。让我们知道它是怎么回事。

ASP.Net从ActionLink打开模态

1 个答案: