JavaScript action result no longer working after converting to partial view - asp.net

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" }) %>

Related

Rendering view in ASP.Net MVC

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.

ASP.NET MVC - How to page ajax search results?

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 :)

Get value of a query string from asp.net mvc controller action to <script type="text/javascript">

I am passing a query string with name "RowTobeHighLighted" from my Asp.net mvc action result. What I have to do is, I have to get the query string value from that controller action to a script of type text/javascript. I have tried to use simple Request.Querystring() under javascript. But that is not working.
Is it possible to get the querystring value from controller action.Or, is it possible to get the value of viewdata under <script type="text/javascript"> tag.
Well no, Request.QueryString won't work, because it's server side only.
You have a few options
You could use Request.QueryString to embed the value in a script
var myValue = <% = HttpUtilityRequest.HtmlEncode(QueryString["myValue"]") %>
You could either pass the query string value as view data to the view and then use it in your javascript like so
var myValue = <% HttpUtilityRequest.HtmlEncode(ViewData["myValue"]) %>
Or you could look at the query string in javascript
var qs = new Querystring()
var myValue = qs.get("myValue")
Of course with all of these you should watch for Cross Site Scripting attacks.
On the client side: use the Querystring.
On the server side: (provide value to JS):
<%= "var RowTobeHighLightedUrl = '" + Request.QueryString["RowTobeHighLighted"] + "';"%>
If the RowTobeHighLighted should be JavaScript Escape (NOT HtmlENcode!).
Use TempData for this sort of temporary message.
In your controller:
TempData["RowToHighlight"] = rowNumber;
And then in the view:
<% foreach (var row in Model) { %>
<tr>
<td id="row_<%= row.id %>"<%= (row.id == (int)TempData["RowToHighlight"]) ? " class="highlighted" : "" %>>my row</td>
</tr>
<% } %>
And then if you were using jQuery for example to fade out or whatever (inside your of jQuery document.ready):
<% if (TempData["RoToHighlight"] != null) { %>
$("#row_<%= (int)TempData["RowToHighlight"] %>").fadeOut();
<% } %>
Of course, be sure to use any necessary escaping and encoding etc.

ASP.NET MVC - Disable Html Helper control using boolean value from Model

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" })

asp.net mvc complex ajax updates

i'm wanted to perform some ajax calls in a certain way.
I have a page. In this page are 2 ViewUserControls, say control1 and control2.
control1 has a list of Ajax.ActionLinks that call control2 like this:
<%= Ajax.ActionLink(page.Name, "PageDetails", new { pageSysName = page.SysName }, new AjaxOptions { UpdateTargetId = "pageEdit" })%>
control2 has an Ajax form which updates fine. The Ajax.BeginForm method looks like this:
Ajax.BeginForm("SavePage", "Admin", new AjaxOptions { UpdateTargetId = "pageEditUpdated" })
When a user hits the Save button, it currently updates a div called pageEditUpdated with a basic Content("updated") return type from the Controller.
The part i'm stumped on is how to update control2 to reflect the new changes.
To sum it up, a Page has 2 controls. I'd like control2 to refresh itself and also update a div to notify the user that the update has been performed.
Have your SavePage method return a partial that reflects the updated form contents, including the update message. Have the update target be the "inner container" of the form.
<% Ajax.BeginForm("SavePage", "Admin", new AjaxOptions { UpdateTargetId = "innerForm" }) { %}
<div id="innerForm">
<% Html.RenderPartial( "EditPageContents" ) %>
</div>
<% } %>
Your save action should then return
updatedModel.UpdateMessage = "updated";
return PartialView( "EditPageContents", updateModel );
and your partial view should have
<% if (!string.IsNullOrEmpty( UpdateMesage )) { %>
<%= Html.Encode( UpdateMessage ) %>
<% } %>
Honestly, though, this would be a lot easier using jQuery to post the form via AJAX:
$(function() {
$('form').submit( function() {
$.post( $(this).attr('action'), $(this).serialize(), function(data) {
$('#updateMessage').html(data).show();
});
return false;
});
});
I have to second tvanfosson's comment (I'd vote for him, but my reputation apparently isn't high enough yet). At any rate, when I integrated Ajax functionality with my MVC site I found the Microsoft provided Ajax methods to be fairly clunky. So instead I switched to using the jQuery.form plugin (good examples here). I found it made things much easier to work with. I just created MVC user controls for the section of page I wanted to be ajax, and just reloaded that user control as neccessary.

Resources