2011-05-29 81 views
1

我有一个表格提交AJAX后。它工作正常。一起使用jQuery和ASP.NET MVC。 Ajax文章不起作用?

但是,当我通过点击delete link删除该项目,我有一个问题,一个获取请求不发布。

但从我的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后:

  $('.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); 
      }); 
} 
+0

为什么有人投我的帖子?发生了什么? – Vincent 2011-05-29 06:27:19

+0

也许只是我..但从你的段落很难确切地告诉你在找什么。什么第一次有效?表单提交或删除链接? – 2011-05-29 06:27:54

+0

downvote不是我的,但在你的问题中有很多代码。你能试着只保留必要的代码来理解你的问题吗? – 2011-05-29 06:28:49

回答

2

它看起来像你对我在更新部分后不重新绑定click事件。

发生什么事是您在进行ajax调用时替换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; 
}); 

选择器$(“删除”,sessionList)是给肝功能的上下文,因此不起泡事件一路到顶部。

+0

嗨Mikael,感谢您的快速响应。我想知道为什么我需要声明sessionList变量并附加jquery选择器? – Vincent 2011-05-29 06:40:01

+0

我声明变量的原因是因为你会使用它两次。一个好的经验法则是绝对不要对DOM执行相同的操作两次,因为这很昂贵。我在另一个选择器中将它用作上下文的原因是,live函数可以阻止sessionsList上的冒泡单击事件以节省一些性能。不知道我在哪里阅读。 – 2011-05-29 06:57:24

+0

在直播功能的文档中找到它。 http://api.jquery.com/live/ – 2011-05-29 07:04:16