从ActionLink打开ASP.Net

我有一个要处理的个人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部分

 <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操作进行建模,但无法将其用于将动态数据提取到字段中.

再次,任何帮助将不胜感激.

解决方法:

最后的评论有所帮助.

脚本：未正确链接.

$(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.不确定如何链接.
我不熟悉用于加载编辑页面的加载.如果它可以正常工作,那么您应该继续使用它.

其他/我的方法.这样,我可以在此模式中加载所有部分页面.呈现/替换的页面将根据链接进行更改.

在您的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部分页面.然后我们触发显示模式.

$(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以解决表单验证问题.让我们知道怎么回事.

标签：modal-dialog,asp-net,c
来源： https://codeday.me/bug/20191026/1936831.html