I am struggling to get to grips with a particular form setup in my asp.net MVC application.
Currently I have a page which displays a chunk of data. On this page is a simple form that calls into an action method that returns a partialview when posted (through ajax - jform).
This is all very well until I try and add paging support to the search results.
I have a chunk of code that that will paginate an IQueryable, but Im not sure how to implement this in my current setup.
Heres some code:
[Authorize]
public ActionResult AssetSearch(string RoomID, string type, string keyword, string risks)
{
//check values passed in
Guid? r = null;
if (RoomID != "Any" && RoomID != null)
r = new Guid(RoomID);
string t = type == "Any" ? null : type;
string risk = risks == "Any" ? null : risks;
var assets = surveyRepository.GetAssetsSearch(r, t, keyword, risk);
if (Request.IsAjaxRequest())
{
return PartialView("AssetListControl", assets);
}
else
{
return View("AssetListControl", assets);
}
}
This action method returns a partial view which gets rendered out in a div through the following jquery.
$(document).ready(function() {
$("#searchForm").submit(function() {
$("#searchForm").ajaxSubmit({ target: '#results', beforeSubmit: PreSub, success: Success });
return false;
});
});
function Success(responseText, statusText) {
$("#loadingMessage").html("done");
$('#resultsTable').tablesorter();
$("#results").slideDown("slow");
}
function PreSub(formData, jqForm, options) {
$("#loadingMessage").html("loading...").fadeIn();
$("#results").slideUp("fast");
return true;
}
And my form looks as follows:
<form id="searchForm" action="<%=Url.Action("AssetSearch") %>" method="post">
<fieldset>
<label for="RoomID">
Room Name</label>
<%= Html.DropDownList("RoomID") %>
<label for="Type">
Asset Type</label>
<%= Html.DropDownList("Type") %>
<label for="Risks">
Risk Level</label>
<%= Html.DropDownList("Risks") %>
<label for="Keyword">
Keyword</label>
<%= Html.TextBox("Keyword") %>
<input type="submit" name="sumbit" id="searchBtn" value="Search" />
</fieldset>
</form>
Sorry for the code overload :-)
I have a feeling that I have configured my controller and view in such a way that paging won't be easy to implement. All advice welcome!
Thanks in advance!
Ok, so I managed to get it working with AJAX and POST in a not so attractive way.
Firstly, I dropped a couple of anchor tags in my paged results partial view that, if there are previous or next pages, show up. These links fire off a javascript function and pass a page value. The navigation looks as follows:
<% if (Model.HasPreviousPage)
{ %>
Back
<%} %>
<% if (Model.HasNextPage)
{ %>
Forward
<%} %>
The function looks as follows:
function PageResults(page) {
var form = document.forms["searchForm"];
form.elements["page"].value = page;
$("#searchForm").ajaxSubmit({ target: '#results', beforeSubmit: PreSub, success: Success });
return false;
}
I have also tweaked my controller to accept a page parameter, which is used to retrieve the correct set of results:
var paginated = new PaginatedList<Asset>(assets, Page ?? 0, 10);
This seems to do the trick, although its not great :)
Related
I'm trying to convert a form from synchronous to asynchronous using the Ajax.BeginForm helper method in MVC 4.
In my view I have:
#{
ViewBag.Title = "Users > Edit";
var options = new AjaxOptions()
{
Url = Url.Action("Edit", "User"),
LoadingElementId = "saving",
LoadingElementDuration = 2000,
Confirm = "Are you sure you want to save this User?"
};
}
<div id="saving" style="display:none; color:Red; font-weight: bold">
<p>Saving...</p>
</div>
#using (Ajax.BeginForm(options))
{
#Html.ValidationSummary(true)
<fieldset>
.... FIELDS ...
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
When the submit button is clicked a complete postback is being executed. My action method looks like this:
[HttpPost]
public ActionResult Edit(User user)
{
if (ModelState.IsValid)
{
_repository.Save(user);
TempData["message"] = String.Format("{0} has been saved.", user.Username);
}
return View(user);
}
Is there something I'm missing? Has the MVC 4 current release got a few problems?
In my Web.Config I do have ClientValidationEnabled and UnobtrusiveJavaScriptEnabled set to true.
I also have these specified in my _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Is there something I'm missing?
Maybe you are missing the unobtrusive ajax script:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
if i am understood correct, you are trying to post the data to controller, after successful you need to go to home page ?? if not can you clarify. so that will try to help you
if (ModelState.IsValid)
{
_repository.Save(user);
TempData["message"] = String.Format("{0} has been saved.", user.Username);
return RedirectToAction("yourActionToRedirect"); // after succesfull it will go to the index view
}
I had the same kind of problem... I've updated all the js files with nuget package console.
just my 2 cents, but also at the time of writing, the jquery.unobtrusive.ajax file does contain calls to the deprecated jquery function '.live' (=> it's deleted from jquery 1.9+ version) jquery live
I think there are like 4 occurrences that you'll have to change with .on, now it works fine ;-)
In my code I am using a partial view (call it PV1)
<div id="div_1">
<% Html.Partial("PV1", Model); %>
</div>
and in that partial view I am using "Ajax.BeginForm" to redirect it to a particular action, hence it is doing so ...
using (Ajax.BeginForm("action1", "Forms", null, new AjaxOptions { UpdateTargetId = "div_1" }, new { id = "form1" }))
{
Response.write("I am here.");
}
public ActionResult action1(XYZ Model)
{
//
return PartialView("PV1", Model);
}
at the last line of action I am again calling the same partial 'PV1', hence it is doing this too ...
but when rendering the view it don't print or do the steps written with in partial view, it override them with and show nothing ...
Html.Partial actually returns the result of rendering the view, you want to do <%= Html.Partial() %> or <% Html.RenderPartial(); %>
Html.Partial() returns the Html and thusly must be output on the page via <%= %> and Html.RenderPartial() uses Response.Write to output onto the page and can be used with <% %>.
This is not what you would use Ajax.BeginForm for. That helper is used to create actual <form> tags that will later be submitted to the server using MVC's unobtrusive ajax (so you still need some kind of a trigger action - a button, javascript - anything that submits the form).
I'm am not very clear on what you're trying to achieve. If you want to load a partial view with ajax, I would suggest using something like jQuery's ajax load method.
Early yesterday, the following validation notice was working correctly. Then we converted the Index view where the request for this action originates to use a partial view, and the Delete ActionLink is now inside that partial view, and now the string argument to the JavaScript method call is rendered literally and as the only content on the 'destination' Delete view.
public ActionResult Delete(int id)
{
var perm = JobCardService.CheckBusinessRules(id);
if (!string.IsNullOrEmpty(perm))
{
return JavaScript("NotifyFailure('You may not delete this Installation: " + perm + "', false, 2000);");
}
JobCardViewData viewData = ViewDataFactory.CreateBaseViewData<JobCardViewData>("Installation List");
return View("Delete", viewData);
}
The Filter action returns the partial view, and is requested as below:
<div class="editor-field">
<% using (Ajax.BeginForm("Filter", "JobCard", new AjaxOptions { UpdateTargetId = "jobList" }))
{ %>
<%= Html.DropDownListFor(model => model.RequesterId, new SelectList(Model.RequesterList, "RequesterID", "CompanyName", Model.RequesterId), new { onchange = "$('#Select_Save').click();" })%>
<input id="Select_Save" type="submit" value="Save" style="display: none" />
<%
}%>
</div>
If the action method is responsible for returning a view, seems like the response shouldn't be returning a JavaScript if in error because no underlying ASP.NET page would be served, which means that you would see it as literal text.
Consider assigning the method call to ViewData, and in your client do something like:
<% if (ViewData["X"] != null) { %>
<script type="text/javascript">
<%= ViewData["X"] %>
</script>
<% } %>
Calling VIewData["X"] like I do should render the JavaScript code directly and get directly executed when parsed.
I think that might work; you can always utilize other mechanisms like eval to parse content, or do whatever else you might need....
Refer to the comment of this question ASP.NET MVC Javascript ActionResult
The other aspect is that using this return type is considered to be an anti-pattern and should be avoided. The suggested approach is to use a Json result.
Working example for JavaScriptResult in asp.net mvc
http://devlicio.us/blogs/billy_mccafferty/archive/2009/02/07/beware-of-asp-net-mvc-javascriptresult.aspx
Edit:
Since javascript is being returned from the Controller, an alternative would be to send script back to the browser that redirects the user to the correct page.
public ActionResult Delete(int id)
{
var perm = JobCardService.CheckBusinessRules(id);
if (!string.IsNullOrEmpty(perm))
{
return JavaScript("NotifyFailure('You may not delete this Installation: " + perm + "', false, 2000);");
}
// you may need to do a bit more to create a URL in the form of http://...
UrlHelper u = new UrlHelper(this.ControllerContext.RequestContext);
string url = u.Action("ActionName","ControllerName", new{id=1}); // the new Action will return the delete view
return Javascript(String.Format("window.location =""{0}"",url);
}
Refer to Creating a URL in the controller .NET MVC for more on the UrlHelper.
This may not be the best way to do this, but every other answer I have come across has required extensive rework to achieve. This requires one small, simple change and works exactly as required. All I had to do was change the Delete action link from this:
<%= Html.ActionLink("Delete", "Delete", new { id = item.InstallationDBNumber }) %>
to this:
<%= Ajax.ActionLink("Delete", "Delete", new { id = item.InstallationDBNumber }, new AjaxOptions { HttpMethod = "Get" }) %>
My problem is the following:
I'm using client validation function of the MVC 2.0 framework.
Everything is nice, when I use the validation in a simple form.
But when I use an Ajax form, and I update the fields of the ajax form, the client validation doesn't work.
I think about, I have to refresh the validation after the ajax call but I don't know how I should do it.
Anybody can help me?
this happens because the window.mvcClientValidationMetadata fills in a different "scope" than the jquery validation or mvc client validation functions. I have solved this with jquery validation adding the following line before the ajax.begin form. Like this:
<div id="result"></div>
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
// here goes the form
<input type="submit" value="Create" />
<% } %>
this is the required code that needs to be added:
<script type="text/javascript">
function RefreshClientValidationMetadata() {
var allFormOptions = window.mvcClientValidationMetadata;
if (allFormOptions) {
while (allFormOptions.length > 0) {
var thisFormOptions = allFormOptions.pop();
__MVC_EnableClientValidation(thisFormOptions);
}
}
}
RefreshClientValidationMetadata();
</script>
Of course the function RefreshClientValidationMetadata() can be added in any place.
Hope this help!
Try this:
$(document).ajaxComplete(function () {
$.validator.unobtrusive.parse(document);
});
I am outputting a textbox to the page using the Html helpers. I want to add the disabled attribute dynamically based on whether or not a boolean value in my model is true or false.
My model has a method that returns a boolean value:
<% =Model.IsMyTextboxEnabled() %>
I currently render the textbox like follows, but I want to now enabled or disable it:
<% =Html.TextBox("MyTextbox", Model.MyValuenew { id = "MyTextbox", #class = "MyClass" })%>
If the return value of Model.IsMyTextboxEnabled() == true I want the following to be output:
<input class="MyClass" id="MyTextbox" name="MyTextbox" type="text" value="" />
If it == false, I want it to output as:
<input class="MyClass" id="MyTextbox" name="MyTextbox" type="text" value="" disabled />
What is the cleanest way to do this?
This here should do the trick:
<%= Html.TextBox("MyTextbox", Model.MyValuenew,
(Model.IsMyTextboxEnabled() ? (object) new {id = "MyTextbox", #class = "MyClass"}
: (object) new {id = "MyTextbox", #class = "MyClass", disabled="true" })) %>
In your helper would you have a check in the code, when you are generating the html, that simply checks the bool and then either adds the disabled attribute or leaves it out?
This is a simply example and not well structrued but...
if (disabled)
return string.Format(CultureInfo.InvariantCulture, "<input type=text disabled/>", new object[] { HttpUtility.HtmlAttributeEncode(s), myTextBox });
Is this what you were asking?
EDIT:
Wait, I see now. I think you'll need to either create your own helper or extend the MVC textbox helper so that you can do it.
Either that or you can I think do something like;
<%= Html.TextBox("mytextbox","", new { disabled="true" } %>
The above is untested but something like that should work.
EDIT 2:
<% if (condition) {%>
<%= Html.TextBox("mytextbox", "", new {#readonly="readonly"}) %>
<%} else {%>
<%= Html.TextBox("mytextbox", "") %>
<%}
Too late maybe but hope it will help:
I´ve been working with ASP MVC recently and (as I refused to have one combination of Anonymous types for each possible set of attributes) realized that, as of MVC 2, every Input Extension method has two forms: one with attributes as Objects and one as IDictionary<string, Object> element. See the msdn API
So, I ended up coding the following, which personally I find far more convenient that creating multiple objects (actually, for multiple option or checkbox controls you can use just one Dictionary and add or remove properties at will):
<%
IDictionary<string, Object> radioAttrs = new Dictionary<string, Object>();
radioAttrs.Add("class", "radioBot");
if (Model.EnabledRegistro)
{
radioAttrs["onclick"] = "updateControlsForInfoNom(true)";
}
else
{
radioAttrs["disabled"] = "disabled";
}
%>
<%: Html.RadioButtonFor(model => model.Accion.calculoRegistro, "true", radioAttrs)%>
...
With this method you can supply multiple attributes if needed
#Html.TextBox("mytextbox", new {}, new { #class = "myclass", disabled = "true" })