一起使用 jQuery 和 ASP.NET MVC。 Ajax 帖子不起作用？

Question

我有一个带有 AJAX 帖子的表单提交。效果很好。

但是，当我通过单击删除链接删除该项目时，我遇到了问题，获取请求未发布。

但是从我的javascript函数中，你可以看到我使用jQuery css选择器来检测链接是否被点击，所以我很困惑。

这是我的代码

我的控制器：

public class SessionsController : Controller
{
    private SessionRepository _repository;

    public SessionsController() : this(new SessionRepository()) { }

    public SessionsController(SessionRepository repository)
    {
        _repository = repository;
    }

    public ActionResult Index()
    {
        var sessions = _repository.FindAll();

        //for ajax requests, we simply need to render the partial
        if (Request.IsAjaxRequest())
            return PartialView("_sessionList2", sessions);
            //return View("_sessionList", sessions);

        return View(sessions);
    }

    [HttpPost]
    public ActionResult Add(Session session)
    {
        _repository.SaveSession(session);

        if (Request.IsAjaxRequest())
            return Index();

        return RedirectToAction("index");
    }

    [HttpPost]
    public ActionResult Remove(Guid session_id)
    {
        _repository.RemoveSession(session_id);

        return RedirectToAction("index");
    }

}

会话视图：

@model IEnumerable<MyMVCDemo.Models.Session>


<h2>Hijax Technique</h2>    

<div id="session-list">        
    @{Html.RenderPartial("_sessionList2");}
</div>

<p>
</p>

@using (Html.BeginForm("add", "sessions", FormMethod.Post, new { @class = "hijax" }))
{
<fieldset>
    <legend>Propose new session</legend>
    <label for="title">Title</label>
    <input type="text" name="title" />

    <label for="description">Description</label>    
    <textarea name="description" rows="3" cols="30"></textarea>

    <label for="level">Level</label>
    <select name="level">
        <option selected="selected" value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>        
    </select>

    <br />
    <input type="submit" value="Add" />
    <span id="indicator" style="display:none"><img src="../../content/load.gif"   alt="loading..." /></span>
</fieldset>

}

<label>
   <input type="checkbox" id="use_ajax" />
   Use Ajax?
</label>

<script src="../../Scripts/Common.js" type="text/javascript"></script>

我的部分视图：

@model IEnumerable<MyMVCDemo.Models.Session>

<table id="sessions">
<tr>
    <th>Title</th>
    <th>Description</th>
    <th>Level</th>
    <th></th>
</tr>

@if(Model.Count() == 0) {
<tr>
    <td colspan="4" align="center">There are no sessions.  Add one below!</td>
</tr>
}

@foreach (var session in Model)
{ 

    <tr>
        <td>@session.Title</td>
        <td>@session.Description</td>
        <td>session.Level</td>
        <td>   
            @Html.ActionLink("remove", "remove", new { session_id = session.Id }, new { @class = "delete" })
        </td>
    </tr>

}

这是我的 javascript ，它调用 ajax post：

            $('.delete').click(function () {
    if (confirm('Are you sure you want to delete this item?')) {
        $.ajax({
            url: this.href,
            type: 'POST',
            success: function (result) {
                $("#session-list").html(result);
            }
        });

        return false;
    }
    return false;
});
    $("form.hijax").submit(function (event) {
    if ($("#use_ajax")[0].checked == false)
        return;

    event.preventDefault();  //prevent the actual form post
    hijack(this, update_sessions, "html");
});

function hijack(form, callback, format) {
    $("#indicator").show();
    $.ajax({
        url: form.action,
        type: form.method,
        dataType: format,
        data: $(form).serialize(),
        completed: $("#indicator").hide(),
        success: callback
    });
}
function update_sessions(result) {
    //clear the form
    $("form.hijax")[0].reset();

    //update the table with the resulting HTML from the server
    $("#session-list").html(result);
    $("#message").hide().html("session added")
            .fadeIn('slow', function () {
                var e = this;
                setTimeout(function () { $(e).fadeOut('slow'); }, 2000);
            });
}

Answer 1

在我看来，更新部分内容后，您不会重新绑定点击事件。

发生的情况是，当您进行 ajax 调用时，您替换了 DOM（事件绑定到的 DOM）。因此，在您更新帖子表格后，您的所有活动都消失了。

在 jquery 中，有一个现场事件可以帮助您。

下面的代码未经测试，可能存在一些问题，但它应该可以给您一个想法。

var sessionList = $('#session-list'); 
$('.delete', sessionList).live('click', function () {
    if (confirm('Are you sure you want to delete this item?')) {
        $.ajax({
            url: this.href,
            type: 'POST',
            success: function (result) {
                sessionList.html(result);
            }
        });

        return false;
    }
    return false;
});

选择器 $('.delete', sessionList) 是为 live 函数提供一个上下文，这样它就不会将事件一直冒泡到顶部。