I'm used to the ASP.NET Webforms easy way of doing AJAX with UpdatePanels. I understand the process is much more artisanal with MVC.
In a specific case, I'm using Data Annotations to validate some form inputs. I use the HTML.ValidationMessageFor helper to show an error message. If I want to use AJAX to post this form and show this error message, what would be the process? Is it possible to keep the HTML.ValidationMessageFor and make it work with AJAX?
Thank you.
Are you using the built-in AJAX methods? For example, are you created the AJAX form with Ajax.BeginForm(...)? If so, it's very easy to show validation messages.
One more thing: do you want to display a validation message for each individual incorrect control, or do you just want to have a validation summary above your form? I'm pretty sure you're asking about displaying an individual message for each control, but I'll include both just in case.
To display an individual message for each incorrect control:
First, you need to put your form inputs inside a Partial View. I'll call that Partial View RegisterForm.ascx.
Next, you should have something like this in your view:
<% using (Ajax.BeginForm("MyAction", null,
new AjaxOptions {
HttpMethod = "POST",
UpdateTargetId = "myForm"
},
new {
id = "myForm"
})) { %>
<% Html.RenderPartial("RegisterForm"); %>
<% } %>
Finally, your Controller Action should look something like this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MyAction(CustomViewModel m)
{
if(!m.IsValid) //data validation failed
{
if (Request.IsAjaxRequest()) //was this request an AJAX request?
{
return PartialView("RegisterForm"); //if it was AJAX, we only return RegisterForm.ascx.
}
else
{
return View();
}
}
}
To display only a validation summary above your form:
You should first create a separate ValidationSummary Partial View. Here's what the code of ValidationSummary.ascx should look like:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.ValidationSummary("Form submission was unsuccessful. Please correct the errors and try again.") %>
Next, inside your view, you should have something like this:
<div id="validationSummary">
<% Html.RenderPartial("ValidationSummary"); %>
</div>
<% using (Ajax.BeginForm("MyAction", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "validationSummary" })) { %>
<!-- code for form inputs goes here -->
<% } %>
Finally, your Controller Action should resemble this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MyAction(CustomViewModel m)
{
if(!m.IsValid) //data validation failed
{
if (Request.IsAjaxRequest()) //was this request an AJAX request?
{
return PartialView("ValidationSummary"); //if it was AJAX, we only return the validation errors.
}
else
{
return View();
}
}
}
Hope that helps!
This article might be helpful:
ScottGu's blog: ASP.NET MVC 2: Model Validation.
The validation used in MVC can be both client and server side. To enable client-side validation use the:
<% Html.EnableClientValidation(); %>
declaration somewhere in your view. This negates the need to use AJAX to post your form to the server and then display the results inline, as users with javascript enabled will have their own clientside validation.
Related
Hoping someone can help me solve this issue.
I'm using Ajax.BeginForm quite often when I need to update a part of my actual webpage. But if I have a second button in the web form where I need go to a complete different page, and for example do a search and get some values that I need to complete the form. The page turns up in the update panel (updateTargetID) instead of in a complete new View. That is happening even id a do a RedirectToAction in the controller. Of course the ajax.beginform does what I accept it to do, in other words update the panel that shall be updated. But is there a way to get ajax.Beginform to use redirectToaction without updating when the user is choosing to do for example a search instead of sending the form?
I'm working with asp.net MVC,
Problem;
<% using (Ajax.BeginForm(new AjaxOptions() { LoadingElementId = "loadingElement", UpdateTargetId = "SearchResult", InsertionMode = InsertionMode.Replace}))
{%>
<% Html.RenderPartial("Searchfields", Model); %>
<div>
<%:Html.ActionLink("blank", "Index")%>
</div>
<div id="loadingElement" style="display: none">
Load data...
</div>
<div id="SearchResult">
<% if (Model.SearchResult != null)
{
Html.RenderPartial("SearchResult", Model.SearchResult);
} %>
</div>
<% } %>
In the controller (post) I do this among other stuff;
if (Request.IsAjaxRequest())
{
return PartialView("SearchResult", data.SearchResult);
}
But before this I need to do:
if (data.SearchResult.Count() == 1)
{
return RedirectToAction("Edit", "Person", new { Id = data.SearchResult.First).Id});
}
but ofcourse if I do that the hole page i rendered in the corresponding updateTargetId,
I need to render a new view instead. So how can I for exampel use javascript to redirect oncomplete and have the values from the model sent to the script to for exampel do a window.location.replace?
I'm struggling with javascript, so please help me!
I want to use jQuery ($.post) to submit my html form, but I want to use the client side validation feature of MVC 2. Currently I hook up the post function to the "OnSubmit" event of the form tag, but I can't hook into the validation, ideally I want to be able to do
if (formIsValid) {
$.post('<%=Url.Action("{some action}")%>'...
}
Please note, Client side validation is working with jQuery.validation, I just can't get it to test if the validation was successful or not before I post my data.
Andrew
The final solution
<%
Html.EnableClientValidation();
using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "registrationForm" })) {
%>
...
<button type="submit" onclick="return submitRegistration();">Register</button>
<%
}
%>
<script type="text/javascript">
function submitRegistration() {
if ($("#registrationForm").valid()) {
$.post('<%=Url.Action("{some action}")'...
}
// this is required to prevent the form from submitting
return false;
}
</script>
You can initiate jQuery validation on the button click event. Place the following inside your button-click event-handler:
if ($('form').valid())
//take appropriate action for a valid form. e.g:
$('form').post('<%=Url.Action("{some action}")%>')
else
//take appropriate action for an invalid form
See the Validation plugin documentation for more information.
I have feature on my website (some UI and associated functionality) that I want to be able to reuse on multiple pages. For the purposes of this question, let's say it's a "Comments" feature.
There is an area in my application for Components and within the area are a controller: /Controllers/CommentController, and two partial views: /Views/Comment/Index.ascx (for listing comments) and /Views/Comment/Create.ascx (for creating comments).
CommentController looks something like this:
public class CommentController : Controller
{
[ChildActionOnly]
public ActionResult Index()
{
return PartialView(GetComments());
}
[HttpGet]
[ChildActionOnly]
public ActionResult Create()
{
return PartialView(); //this is wrong.
}
[HttpPost]
[ChildActionOnly]
public ActionResult Create(FormCollection formValues)
{
SaveComment(formValues);
return RedirectToAction("Index"); //this is wrong too.
}
}
Index Partial View:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<div>
<% foreach (var item in Model) { %>
<div>
<%: item.Comment %>
</div>
<% } %>
<%: Html.ActionLink("Add a Comment", "Create", "Comment", new { area = "Components" }, null) %>
</div>
Create Partial View:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<div>
<% using (Html.BeginForm())
{%>
Enter your comment:
<div>
<input type="text" name="comment" />
</div>
<p>
<input type="submit" value="Create" />
<% //also render a cancel button and redirect to "Index" view %>
</p>
<% } %>
</div>
The Index partial view is included in a view with RenderAction, like so:
<% Html.RenderAction("Index", "Comment", new { area = "Components" }); %>
This code doesn't work because the forms within the partial views submit to actions on the CommentsController that are marked [ChildActionOnly] (this is by design, I don't want the "Components" to be requested independently of a hosting page).
How can I make this "component" approach work, i.e. have a partial view that submits a form to change the state of a component within a page without losing the hosting page itself?
EDIT:
To clarify, the use of [ChildActionOnly] is not my problem here. If I remove the attribute from my action methods, my code only "works" in that it doesn't throw an exception. My "component" still breaks out of its hosting page when its form is submitted (because I'm telling the form to submit to the partial view's URL!).
You are making MVC fight itself by asking a form to target an action that is marked as ChildActionOnly.
My solution to this problem when I was designing a highly reusable wizard framework, was to NOT mark the actions as ChildActionOnly but instead to detect if the request was an ajax one or just a plain vanilla request.
The code for all this is packaged into a base controller class. In your derived controllers, you do something like:
[WizardStep(4, "Illness Details")]
public ActionResult IllnessDetails()
{
return Navigate();
}
Where the Navigate() method of the base controller has decided whether to return the full view or just the partial view, depending on whether it is, or isn't, an ajax request. That way, you can never return the partial view in isolation.
To ascertain if it is an Ajax request, I used a combination of Request.IsAjaxRequest() and TempData. The TempData is needed because my wizard framework implements the PRG pattern out of the box, so I need to persist the fact that the original post was an ajax one.
I guess this is just one solution and it took a bit of trial and error to get it right. But now I live happily ever after developing wizards like I was JK Rowling...
Use Ajax to post the partial.
I'm new to web development and i'm starting with a MVC project.
I have a view to create a new Service.
In this view, i need to have a button to show a dialog with client names (i also would like to implement filters and paging in this dialog).
Once the user selects a client from the dialog, i need to populate some combo boxes in the Service View with info relative to that particular client.
How can i accomplish this? If there any demo code or tutorial i can get my hands on to learn this?
Thanks in advance for any tip.
Whoa, that's a lot to answer in a single question.
I think you need to go through the NerdDinner sample first to get yourself familier with the MVC framework.
After that jQuery will be your friend. Essentially you can create a dialog with a jQuery call and use jQuery Ajax calls to your controller to get and filter data.
A good reference for jQuery is at jQuery.com
I recommend reading Pro ASP.NET MVC Framework By Steven Sanderson.
Phil Haack's, Steven Sanderson's and Stephen Walther's blog are also good resources.
(griegs i couldn't comment on your answer because the post is too long)
I'm using TailSpin Travel as bible for now.
I have a doubt that maybe you can clarify.
Edit View
(...)
<div id="clientSearch">
<%= Html.DropDownList("clientId", Model.Clients, Model.Clients)%>
<div class="resultsWrapper">
<div class="results">
<% Html.RenderPartial("clientDetails", Model); %>
</div>
</div>
</div>
(...)
Client Details partial View
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EyePeak.ViewModel.Service.EditServiceViewModel>" %>
<% if(Model.SelectedClient != null) { %>
<tr>
<%Html.LabelFor(model => model.SelectedClient.Name);%>
<%= Html.DropDownList("clientAddresses", Model.SelectedClient.Addresses.Select(i => new SelectListItem { Value = i.Id.ToString(), Text = i.Name}))%>
</tr>
<% } %>
Controler:
(...)
public ActionResult New()
{
var service = new EyePeak.Data.Model.Service();
return View("Edit", this.GetEditViewModel(service));
}
(...)
public ActionResult SearchClientAddresses(string clientID)
{
var selectedClient = this._clientService.GetClient(Convert.ToInt32(clientID));
var model = new EditServiceViewModel
{
SelectedClient=selectedClient
};
return PartialView("clientDetails", model);
}
jQuery:
Sys.Application.add_load(
function()
{
$("#clientId").bind("change", showClientInfo);
}
);
function showClientInfo()
{
var id = $("#clientId").val();
$("#clientSearch .results table").fadeOut();
$("#clientSearch .results").slideUp("medium", function() {
$.ajax(
{
type: "GET",
url: "/Service/SearchClientAddresses",
data: "clientID=" + escape(id),
dataType: "html",
success: function(result) {
var dom = $(result);
$("#clientSearch .results").empty().append(dom).slideDown("medium");
}
});
});
}
My question is: Do i have to create a new EditServiceViewModel only with the Client information to pass it to the partial view? Can't i update my current ViewModel and pass it to the Partial view?
I'll need to create more partial views along the way in this particular view, so I'll need to create a viewmodel for each?
Maybe i didn't understood the concept well.
Thanks again for your help.
Inside of an asp.net mvc partial view, I have an Ajax form that posts a value and replaces the contents of its parent container with another instance of the form.
Index.aspx view:
<div id="tags">
<% Html.RenderPartial("Tags", Model); %>
</div>
Tags.ascx partial view:
<% using(Ajax.BeginForm("tag", new AjaxOptions { UpdateTargetId = "tags" }))
{ %>
Add tag: <%= Html.TextBox("tagName")%>
<input type="submit" value="Add" />
<% } %>
The controller:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Tag(string tagName) {
// do stuff
return PartialView("Tags", ...);
}
The problem is when the new instance of the form returns, the posted value is already stored in the input field. As in, whatever I posted as the 'tagName' will stay in the textbox. Firebug shows that the value is hardcoded in the response.
Is there any way to clear the input textbox's value when returning the partial view?
I've tried:
<%= Html.TextBox("tagName", string.Empty)%>
and
<%= Html.TextBox("tagName", string.Empty, new { value = "" })%>`
neither of which do anything.
EDIT:
I realize there are js solutions, which I may end up having to use, but I was wondering if there were any ways of doing it in the backend?
I'm not sure if this solution is "good enough" for you, but couldn't you just empty the form in a JS callback function from your ajax call? If you're using jQuery on your site, the callback function could look something like this:
function emptyFormOnReturn() {
$(':input').val();
}
I am not entirely sure if it will, but in case the above code also removes the text on your submit button, change the selector to ':input[type!=submit]'.
yes you should use jquery to set values on response
if you change your code to use jquery for ajax operations, you can call you settingvalues function on success callback...example:
http://docs.jquery.com/Ajax/jQuery.ajax#options