I'm experiencing a strange problem while trying to use the Ajax.BeginForm method of ASP.NET MVC3. The form renders properly on the page with the correct action attribute. However, when the form is submitted, the "OnFailure" event is returning a "Not Found" 404 error.
If I watch the request with fiddler, I see that the post URL is "/[Object NodeList]" which is obviously invalid.
My Razor code is as follows:
#using (Ajax.BeginForm("Save", "Items", new AjaxOptions { UpdateTargetId = "itemContainer", InsertionMode = InsertionMode.Replace, OnFailure = "onFailure"}))
{
<div style="position:absolute; bottom:20px; left:200px;">
<button type="submit" id="Save" name="action" value="Save">Save</button>
<button type="submit" id="Cancel" name="action" value="Cancel">Cancel</button>
</div>
}
The problem was using "action" for the name attribute on the submit buttons. As soon as I changed the name attribute to a different value, everything started working perfectly.
I'm guessing that there is a jQuery selector in the unobtrusive ajax library that got confused.
Do you have unobtrusive JavaScript on or off in your web.config? Im first guessing here the ms Ajax library is acting goofy so enable unobtrusive so we get jquery support.
What is your form action set to? Post your form HTML element if you can .
Related
I am doing an MVC tutorial and have hit a problem.
I changed a working view from using Html.BeginForm to Ajax.BeginForm. But the form is not submitting.
Per my research I verified that ClientValidationEnabled and UnobtrusiveJavaScriptEnabled are both set to true in web.config. I do have the most recent version of jquery.unobtrusive-ajax,js and jquery refrenced. But still no joy.
I firebugged jquery.unobtrusive-ajax to see what it was doing. It is setting itself up on page load. But no functions are called when I click the submit button.
Here is a snippet from View Source to show how the form tag is begin set up:
<div id="formSection">
<h3>Having trouble? Send me a message</h3>
<form action="/Home/Contact" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#formSection" id="form0" method="post">
</form>
<textarea name="message"></textarea>
<input type="submit" value="send" />
</div>
My error became apparent while asking the question. I was cleaning up the bad formatting of the HTML when I saw the end form tag was before the submit button!
I had an error in my Razor code.
#Using (Ajax.BeginForm("Contact", "Home", New AjaxOptions With {.HttpMethod = "post", .InsertionMode = InsertionMode.Replace, .UpdateTargetId = "formSection"}))
End Using
<textarea name="message"></textarea>
<input type="submit" value="send" />
Putting the End Using right after the Using closed the block of course, so the input element never got into the form.
Correct syntax:
#Using (Ajax.BeginForm("Contact", "Home", New AjaxOptions With {.HttpMethod = "post", .InsertionMode = InsertionMode.Replace, .UpdateTargetId = "formSection"}))
#<textarea name="message"></textarea>
#<input type="submit" value="send" />
End Using
It would have been nice if the generated code was formatted well, I would have seen the end form tag location much sooner.
Hopefully I help avoid a few head slaps.
How can I prevent page reloading when submitting form in partial view? There are a lot of examples but it seems that non of them is working for me. This is what I have. Partial view (Razor) which calls this:
#using (Ajax.BeginForm("SaveReply", "Home", null, new AjaxOptions { HttpMethod = "Post" }, new { target = "_self" }))
{
<div class="input-group wall-comment-reply" style="width:100%">
#Html.Hidden("eventid", #item.EventID)
<input name="txtReply" type="text" class="form-control" placeholder="Type your message here...">
<span class="input-group-btn">
<button class="btn btn-primary" id="btn-chat" type="submit">
<i class="fa fa-reply"></i> Reply
</button>
</span>
</div>
}
Then I have my action method in the controller:
[HttpPost]
public void SaveReply(string txtReply, string eventid)
{
//some code
}
The controller action is fired but after that it is automatically redirected to localhost/home/SaveReply
Maybe the problem is that this partial view is rendered from string. I took the code from:
How to render a Razor View to a string in ASP.NET MVC 3?
Also amongs other things i tried this:
http://geekswithblogs.net/blachniet/archive/2011/08/03/walkthrough-updating-partial-views-with-unobtrusive-ajax-in-mvc-3.aspx
I would appreciate any help.
I found the problem.
It seems that you need to reference the Unobtrusive scripts. Just install them from NuGet:
Install-Package Microsoft.jQuery.Unobtrusive.Ajax
And then reference it from the View that calls the Partial View:
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
And miraculosly it works without any other changes. More explanations can be found here:
[Why does Ajax.BeginForm replace my whole page?
and here:
[Why UnobtrusiveJavaScriptEnabled = true disable my ajax to work?
It seems that you need to use it if you are using Ajax.* helpers in MVC 3 and higher.
Apologies if the Title is a bit misleading, I'm just not sure how to go about doing this.
Ok here's the scenario. I am developing a feedback mvc widget that is housed in a Sitefinity 5.1 website. This widget is effectively just a div that is displayed when the user hovers over the feedbackLaunch label using jquery.
VIEW / WIDGET
#using (Html.BeginFormSitefinity())
{
<label for="feedbackLaunch">
<span class="FeedbackHighlight feedbackLaunch">Feedback</span>
</label>
<div class="feedback">
</div>
<div class="FeedbackContent" style="display: none">
<h1>Feedback</h1>
<h2>I thought this page was:
<br />
<br />
#Html.DropDownListFor(x => x.PageRatingId, new SelectList(Model.Rating, "PageRatingId", "PageRatingName"))
<br /><br />
Please give further detail:
<br /><br />
#Html.TextAreaFor(model => model.PageDetails, new { #style = "height: 100px;" })
<br /><br />
<input type="submit" value="Submit" />
</h2>
</div>
}
So I have a rendered page in the background with this feedback div now popped up. Lovely.
However, what I now want to do is do a submit click but without doing a postback, since the feedback div would disappear. Upon submission, I would essentially displaying a new div, or view, informing the info has been posted sent (that'll be fired off to a webservice).
What would be the best approach to do this?
Should I have two partial views, one for the submission form and the other for the "Thank you" section?
I have mentioned Sitefinity just in case there are any gotchas involved with that given it's quite a new feature of the CMS.
Any pointers gratefully received.
You could use AJAX with jQuery. For example give your form an id and then AJAXify it once you show the widget in your view:
$('#feedbackForm').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function(result) {
alert('thanks for submitting your feedback');
// TODO: hide the div containing the feedback form
}
});
return false;
});
If your "Thank you" does not have any dynamically generated content, then just fire an AJAX call to some controller action and when you get a 200 response back just replace the div with a new one with the thank you, all using jQUery.
If you do need to dynamically generate the thank you on the server, then fire the ajax call to an action that returns a partial with the thank you message and once again use jquery to replace the original div with the contents of the response.
I am facing a problem with AjaxForm. This is a lengthy description and I have spent a lot of time on it already so wanted some ideas.
I have a grid displaying Phone(or other) details . I am trying to ajax edit a grid using a Edit Div immediately above the grid.When the edit is saved I am refreshing the entire grid div.
See below
<div class="boxBody AccordionDetails" style="width: 980px; padding: 10px;">
<div id="#Constants.AjaxPhoneResult" title="Phone Numbers">
</div>
<div id="#Constants.AjaxPhoneEditListResult">
#Html.Partial("_PhoneListEdit", #Model)
</div>
The grid is returned as HTML table by the partial "_PhoneListEdit". Each line has an Ajax Action Link rendering the following partial into the above AjaxPhoneResult Div- see below
#using (Ajax.BeginForm(action,
new AjaxOptions
{
UpdateTargetId = Constants.AjaxPhoneEditListResult,
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
}
))
{
#Html.HiddenFor(model => model.ContactID)
#Html.HiddenFor(model => model.ID)
#Html.LabelFor(model => model.PhoneNum)
#Html.EditorFor(model => model.PhoneNum)
<input id="PhoneSubmit" type="submit" value="Save" />
}
The above Ajax Form renders correctly as I can observe using FireBug. However when I press Save the results(Json partial view string) displays in a new form rather than replacing the contents of the grid with updated data.Also I am sure that I have included the JQuery ajax js scripts,The interesting thing is that if I display the AJAX form in a Popup window using JQuery Dialog , the Ajax form works correctly although the markup generated is same.
I am wondering if some action needs to be performed on the AJAX form elements at form load? Maybe that is performed when you use a Jquery dialog. Any help would be appreciated.
I'm trying to get started with Ajax on MVC
In my main view I have the following code:
#Ajax.ActionLink("Click here to get the data","LoadData",
new AjaxOptions
{
UpdateTargetId = "dataPanel",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod="GET"
})
<div id="dataPanel">
</div>
I created the controller's action as below:
public PartialViewResult LatestReview()
{
var myData = GetMyData();
return PartialView("_PartialData", myData);
}
_PartialData is defined as below:
#model MyApp.Models.Data
<div>
#if (Model == null)
{
<p>There is no data yet</p>
}
else
{
<p>
#Model.Body
</p>
}
</div>
But when I click the link, my data (rendered in the _PartialData) is loaded fully in browser, replacing the source page (so not inside the dataPanel div)
When I look at original page source (before clicking the ajax link) It see the ajax actions define as below:
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="after" data-ajax-update="#dataPanel" href="/Home/LoadData">Click here to get the data</a>
<div id="dataPanel">
</div>
What am I doing wrong?
Thanks
I suspect that you forgot to include the jquery unobtrusive ajax script to your page:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
It is this script that makes sense of all Ajax.* helper in ASP.NET MVC 3. Without it they generate standard markup with HTML5 data-* attributes which are used by the script.