Databases
StackOverflow2013
Postsdbo
POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
    primarykey
    data
    text
    <p>I have a form submit with an <code>AJAX</code> post. It works fine.</p> <p>But when I delete the item by clicking the <code>delete link</code>, I have an issue, a get request not post. </p> <p>But from my javascript function, you can see I use jQuery css selctor to detect the link clicked or not, so I am confused.</p> <p>Here is my code </p> <p>My controller:</p> <pre><code>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"); } } </code></pre> <p>The session view:</p> <pre><code>@model IEnumerable&lt;MyMVCDemo.Models.Session&gt; &lt;h2&gt;Hijax Technique&lt;/h2&gt; &lt;div id="session-list"&gt; @{Html.RenderPartial("_sessionList2");} &lt;/div&gt; &lt;p&gt; &lt;/p&gt; @using (Html.BeginForm("add", "sessions", FormMethod.Post, new { @class = "hijax" })) { &lt;fieldset&gt; &lt;legend&gt;Propose new session&lt;/legend&gt; &lt;label for="title"&gt;Title&lt;/label&gt; &lt;input type="text" name="title" /&gt; &lt;label for="description"&gt;Description&lt;/label&gt; &lt;textarea name="description" rows="3" cols="30"&gt;&lt;/textarea&gt; &lt;label for="level"&gt;Level&lt;/label&gt; &lt;select name="level"&gt; &lt;option selected="selected" value="100"&gt;100&lt;/option&gt; &lt;option value="200"&gt;200&lt;/option&gt; &lt;option value="300"&gt;300&lt;/option&gt; &lt;option value="400"&gt;400&lt;/option&gt; &lt;/select&gt; &lt;br /&gt; &lt;input type="submit" value="Add" /&gt; &lt;span id="indicator" style="display:none"&gt;&lt;img src="../../content/load.gif" alt="loading..." /&gt;&lt;/span&gt; &lt;/fieldset&gt; } &lt;label&gt; &lt;input type="checkbox" id="use_ajax" /&gt; Use Ajax? &lt;/label&gt; &lt;script src="../../Scripts/Common.js" type="text/javascript"&gt;&lt;/script&gt; </code></pre> <p>My Partial View:</p> <pre><code>@model IEnumerable&lt;MyMVCDemo.Models.Session&gt; &lt;table id="sessions"&gt; &lt;tr&gt; &lt;th&gt;Title&lt;/th&gt; &lt;th&gt;Description&lt;/th&gt; &lt;th&gt;Level&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; @if(Model.Count() == 0) { &lt;tr&gt; &lt;td colspan="4" align="center"&gt;There are no sessions. Add one below!&lt;/td&gt; &lt;/tr&gt; } @foreach (var session in Model) { &lt;tr&gt; &lt;td&gt;@session.Title&lt;/td&gt; &lt;td&gt;@session.Description&lt;/td&gt; &lt;td&gt;session.Level&lt;/td&gt; &lt;td&gt; @Html.ActionLink("remove", "remove", new { session_id = session.Id }, new { @class = "delete" }) &lt;/td&gt; &lt;/tr&gt; } </code></pre> <p></p> <p>This is my <code>javascript</code> which call the ajax post:</p> <pre><code> $('.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); }); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNathan Koop
    1. USVincent
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwhy someone devote my post? what's happening?
      singulars
      1. POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
      1. USVincent
    2. COmaybe its just me.. but from your paragraph its difficult to tell exactly what you are looking for. What worked the first time? the form submit or the delete link?
      singulars
      1. POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
      1. USAdam Tuliper - MSFT
    3. COThe downvote is not mine, but there's a lot of code in your question. Can you try keeping only the code necessary to understand your problem?
      singulars
      1. POUsing jQuery and ASP.NET MVC together. Ajax post is not working?
      1. USFrédéric Hamidi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload