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.
Related
I have a problem with Ajax.
I want to make multiple forms and replace div containing one after submiting with some Partial View. It's working for me when I use only one form. I don't know what I'm doing wrong here. Maybe it's becasue of custom editorfor?
Here is my code, plese try to help me, I've been trying do this for 2 days.
Index
#model MetriceWeb.Models.TaskInputModel
#{
ViewBag.Title = "Tasks";
}
<h3>
Tasks</h3>
#if (Model.Values.Count == 0)
{
<p>No pendings forms for you at the moment</p>
}
else
{
#Html.EditorFor(x => x.Values)
}
TaskInputValue (editorfor)
#model MetriceWeb.Models.TaskInputValue
#{string s = "task" + Model.TaskId;}
#using (Ajax.BeginForm("GetFromLibrary", "Metrice", new AjaxOptions
{
HttpMethod = "Get",
UpdateTargetId = s,
InsertionMode = InsertionMode.Replace
}))
{
<div class="editor-field" id="#s">
#Html.HiddenFor(x => x.TaskId, new { #class = "TaskId" , id = "TaskId" })
#Html.HiddenFor(x => x.InputId, new { #class = "InputId" })
<h2>
#Html.DisplayFor(x => x.Task)
</h2>
<span>Created: </span>
#Html.DisplayFor(x => x.Date)
<div>
Input Value
#Html.EditorFor(x => x.DateValue)
#Html.ValidationMessageFor(x => x.DateValue)
</div>
<input type="submit" value="Submit" />
</div>
<br />
}
It's entering method in my controller where I'm returning partial view. After submitting my div isn't replacing, the whole new site is loaded. What is wrong here? Please help me, I am in big need.
In order to the Ajax helpers like Ajax.BeginForm work correctly (e.g sending an AJAX request) you need reference in your view the following JavaScript file
jquery.unobtrusive-ajax.js
(and of course before that jquery)
From the Unobtrusive Ajax in ASP.NET MVC 3
An interesting note: since there is no actual JavaScript being emitted
when you use unobtrusive Ajax, if you forget to include one or the
other script, you won’t see any errors when attempting to submit the
Ajax request; it will simply behave like a non-Ajax request.
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.
So I have a partial view "_Customer "with a text box and a save button. Currently, the partial view code, I have this:
#model CompositeViews.Models.Customer
#using (Ajax.BeginForm("Edit", "Customer", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "customerDiv" }))
{
<div id="customerDiv">
#Html.ValidationSummary(true)
<fieldset>
<legend>Customer</legend>
#Html.HiddenFor(model => model.CustomerId)
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<p><input type="submit" value="Save" /></p>
</fieldset>
</div>
}
the view lives withing a parent view called index (which also provides the model the partial view is dependent upon):
#model CompositeViews.ViewModels.CompositeViewModel
<h2>Index</h2>
#Html.Partial("_Customer", Model.Customer)
The parent view is named Index.cshtml and is fed by a simple controller action. When I click on the Save button in the partial view, it goes to the appropriate action on the appropriate controller, but I'm not too sure how to return the updated model data BACK into the partial view.
In all the examples out there, it's a form that does an async post, but the UpdateTargetId targets a that is then filled with some type of updated content. That seems pretty straight-forward and simple.
What I'm struggling with is how to return the same form, with the updated model information using the existing view (_Customer). Basically, it's a BeginForm which targets itself with the result from the controller action, not some other div that is not part of the form.
I'd like to NOT have to rebuild all the HTML by hand that the _Customer view does for me via the MVC framework and return that for rendering. I guess I'm stuck with the form in the partial view submitting the data to the controller, and then needing a way for that same view to re-draw itself on returning from the action method.
Any ideas?
I hope I got you right and you want to show your updated on post back.
In that case you can try this:
<div id="customerDiv">
#Html.RenderAction("Edit", "Customer", Model)
</div>
and put your #using (Ajax.BeginForm()) in Edit result.
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.
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 .