I have a ASP.Net MVC JsonResult function in which I want to return the contents of a PartialView (The content has to be loaded using Ajax, and for some reason I can't return a PartialViewResult).
To render the PartialView I need the ViewContext object.
How do you get the current ViewContext object within an Action method? I don't even see HttpContext.Current in my action method.
I am using ASP.net MVC 1.
a ViewContext is not available within the action method because it is constructed later before rendering the view. I would suggest you using MVCContrib's BlockRenderer to render the contents of a partial view into a string.
I may have missed a point somewhere but my Actions that returned partial views do so by returning a View object that refers to an ascx page. This will return partial HTML without the full page constructs (html, head, body, etc.). Not sure why you'd want to do anything beyond that, is there a specific reason you need to return PartialViewResult? Here's an example from my working code.
First the Action in my controller:
public ViewResult GetPrincipleList(string id)
{
if (id.Length > 1)
id = id.Substring(0, 1);
var Principles = competitorRepository.Principles.Where(p => p.NaturalKey.StartsWith(id)).Select(p=>p);
return View(Principles);
}
And then the partial view (ascx):
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MyProject.Data.Principle>>" %>
<% foreach (var item in Model) { %>
<div class="principleTitle" title="<%= Html.Encode(item.NaturalKey) %>"><%= Html.Encode(item.Title) %></div>
<%} %>
Lastly, the Jquery that sets up the call:
$(function() {
$(".letterSelector").click(function() {
$("#principleList").load("/GetPrincipleList/" + $(this).attr("title"), null, setListClicks);
});
});
So, a full AJAX process, hope that helps.
---- UPDATE following comment ----
Returning Json data is just as easy:
Firstly, initiating the AJAX call when a select box changes:
$("#users").change(function() {
var url = "/Series/GetUserInfo/" + $("#users option:selected").attr("value");
$.post(url, null, function(data) { UpdateDisplay(data); }, 'json');
});
The javascript that processes the returned json data:
function UpdateDisplay(data) {
if (data != null) {
$("div.Message").fadeOut("slow", function() { $("div.Message").remove(); });
$("#Firstname").val(data.Firstname);
$("#Lastname").val(data.Lastname);
$("#List").val(data.List);
$("#Biography").val(data.Biography);
if (data.ImageID == null) {
$("#Photo").attr({ src: "/Content/Images/nophoto.png" });
$("#ImageID").val("");
}
else {
if (data.Image.OnDisk) {
$("#Photo").attr({ src: data.Image.ImagePath });
}
else {
$("#Photo").attr({ src: "/Series/GetImage?ImageID=" + data.ImageID });
}
$("#ImageID").val(data.ImageID);
}
$("form[action*='UpdateUser']").show();
} else {
$("form[action*='UpdateUser']").hide();
}
};
And finally the Action itself that returns the json data:
public JsonResult GetUserInfo(Guid id)
{
MyUser myuser = (from u in seriesRepository.Users
where u.LoginID == id
select u).FirstOrDefault();
if (myuser == null)
{
myuser = new MyUser();
myuser.UserID = 0;
myuser.Firstname = Membership.GetUser(id).UserName;
myuser.Lastname = "";
myuser.List = "";
myuser.Biography = "No yet completed";
myuser.LoginID = id;
}
return Json(myuser);
}
Does that help? If not then can you post some of the code you are working on as I'm missing something.
Related
I have a MVC Controller which contains a couple of actions. One action is responsible for changing rate. Another one is responsible for uploading a file.
the actions work correctly when I play with them. but as soon as I upload a file, if I try to change the rate the post action fails because the url it tries to post to lack the controller name in it. Here are the codes.
here is my code in the view:
Change rate:
<form method="post" action="#Url.Action("UploadPreparedContract")">
#Html.Hidden("userApplicationId", Model.UserApplicationId)
<div class="upload-section k-content">
#Html.Kendo().Upload().Name("files")
<input type="submit" value="Submit"/>
</div>
</form>
<script type="text/javascript">
jQuery(function($) {
var viewModel = kendo.observable({
currentDisclosedRate: "#Model.CurrentDisclosedRate",
changeRate: function(e) {
e.preventDefault();
var self = this;
var rawValue = $('#newDisclosureRate').val();
var rate = parseFloat(rawValue);
$.ajax({
type: "POST",
url: 'ChangeDisclosureRate',
data: { newRate: rate, userApplicationId: #Model.UserApplicationId},
}).done(function(result) {
Notification.success('Rate changed');
self.set("currentDisclosedRate", rawValue);
})
.fail(function(err) {
Notification.error('Not changed. Customer may have placed order');
});
},
});
kendo.bind($("#page"), viewModel);
});
and here is the controller
public class ContractPreparationController : Controller
{
// GET: Application/ContractPreparation
public ActionResult Index(int userApplicationId)
{
// logic to prepare model
return View(new ContractPreparationOutputModel()
{
// Model properties
});
}
[HttpPost]
public async Task<ActionResult> ChangeDisclosureRate(decimal newRate, int userApplicationId)
{
return await Command.ApplyAsync(new ChangeDisclosureRateCommand() {UserApplicationId = userApplicationId, NewDisclosureRate = BasisPoint.Percent(newRate) }) == Command.CommandResult.Succeeded
? new HttpStatusCodeResult(HttpStatusCode.OK)
: new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
[HttpPost]
public async Task<ActionResult> UploadPreparedContract(IEnumerable<HttpPostedFileBase> files, int userApplicationId)
{
if (files == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
if (files.Count() != 1)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "You must upload one file only");
var application = applicationRepository.GetUserApplication(userApplicationId);
if (application == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Invalid user");
var file = files.Single();
var memberDocument = new MemberDocument(blobService, application.FK_UserId);
await memberDocument.Uploadfile(file);
if (await Command.ApplyAsync(new UploadPreparedContractCommand() {FileGuid = memberDocument.FileGuid , UserApplicationId = userApplicationId, FileExtension = memberDocument.FileExtension}) == Command.CommandResult.Succeeded)
{
return RedirectToAction("Index", new {userApplicationId});
}
return new HttpStatusCodeResult(HttpStatusCode.InternalServerError); // No expected failure case
}
}
Use the Url.Action helper method to generate the correct relative url to the action method.
url: '#Url.Action("ChangeDisclosureRate","ContractPreparation")',
When razor executes the code for your view, it will run the Url.Action method and output the correct url (which will have the controller name if needed). You can see it if you do view source of the page.
Try adding the controller name to your ajax url parameter:
url: 'ContractPreparation/ChangeDisclosureRate'
Otherwise MVC doesn't know what controller to use.
I have a List of Listings within my Database. On my View, I have a DropDownList which contains categories. A category contains many listings.
When I select a specific category, I wish to only display those listings which have the category selected.
My main worry is how to generate the JQuery to call my SortListing method in my ListingController.
Here is the current HTML (Razor):
#Html.DropDownListFor(m => m.Categories, Model.Categories, "Select a Category")
My SortListing Method:
public List<Listing> SortListing(string categoryId)
{
var listings = new List<Listing>();
foreach (var listing in _service.ListAllEntities<Listing>())
{
if (listing.CategoryId == categoryId)
{
listings.Add(listing);
}
}
return listings;
}
EDIT I have the following. Put the categoryGuid is coming in null.
This is my code:
$(function () {
$('#SelectedCategoryGuid').change(function () {
var url = $(this).data('url');
var categoryId = $(this).val();
$.ajax({
url: url,
type: 'GET',
cache: false,
data: { categoryId: categoryId },
success: function (result) {
// TODO: manipulate the result returned from the controller action
}
});
});
});
</script>
<h2>Index</h2>
#Html.ActionLink("Create New Listing", "Create")
<br/>
<strong>Filter Listings</strong>
#Html.DropDownListFor(
m => m.SelectedCategoryGuid,
Model.Categories,
"Select a Category",
new {
id = "SelectedCategoryGuid",
data_url = Url.Action("SortListing", "Listing")
}
)
My main worry is how to generate the JQuery to call my SortListing
method in my ListingController.
Actually you should be having other worries as well that I will try to cover throughout my answer.
There's an issue with your DropDownListFor helper. You have used the same property on your model for both binding the selected category value and the list of categories which is wrong. The first parameter of the DropDownListFor helper represents a lambda expression pointing to a primitive type property on your view model:
#Html.DropDownListFor(
m => m.CategoryId,
Model.Categories,
"Select a Category",
new {
id = "categoryDdl",
data_url = Url.Action("SortListing", "Listing")
}
)
and then subscribe to the .change() event and trigger the AJAX request:
$(function() {
$('#categoryDdl').change(function() {
var url = $(this).data('url');
var categoryId = $(this).val();
$.ajax({
url: url,
type: 'GET',
cache: false,
data: { categoryId: categoryId },
success: function(result) {
// TODO: manipulate the result returned from the controller action
}
});
});
});
Now let's take a look at your SortListing controller action because there are issues with it. In ASP.NET MVC standard convention dictates that controller actions must return ActionResults. In your case you seem to be returning some List<Listing>. So the first thing you have to decide is the format you would like to use. One possibility is to return those listings as JSON formatted values:
public ActionResult SortListing(string categoryId)
{
var listings = _service
.ListAllEntities<Listing>()
.Where(x => x.CategoryId == categoryId)
.ToList();
return Json(listings, JsonRequestBehavior.AllowGet);
}
In this case inside your AJAX success callback you will receive this collection of listings and you will have to update your DOM:
success: function(result) {
// result represents an array of listings
// so you could loop through them and generate some DOM elements
}
Another possibility is to have your controller action return a partial view:
public ActionResult SortListing(string categoryId)
{
var listings = _service
.ListAllEntities<Listing>()
.Where(x => x.CategoryId == categoryId)
.ToList();
return PartialView("Listings", listings);
}
and then you will have a corresponding partial view:
#model List<Listing>
#foreach (var listing in Model)
{
<div>#listing.SomeProperty</div>
}
and then inside the success callback you will refresh some containing placeholder:
success: function(result) {
$('#SomeDivIdThatWrapsAroundTheListingsPartial').html(result);
}
So to recap you could either have the controller action return JSON and then manually build the corresponding DOM tree using javascript or return a partial view which will already contain the corresponding markup and simply refresh some containing div with this partial.
I'm trying to make request returns on ajax updated partial view. Apparently request is not returned from the ajax-function.
Here ajax-code:
<script type="text/javascript">
function doAjaxPost(myid) {
// get the form values
var ApplSort = $('#DropDownListSort').val();
var radio_check_val=0;
for (i = 0; i < document.getElementsByName('radio').length; i++) {
if (document.getElementsByName('radio')[i].checked) {
radio_check_val = document.getElementsByName('radio')[i].value;
}
}
// alert("myid=" + myid +";"+ "ApplSort=" + ApplSort + ";" + "radio_check_val=" + radio_check_val);
$.ajax(
{
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: { ApplSort: ApplSort, radio_check_val: radio_check_val, myid: myid },
UpdateTargetId: "tabledata",
dataType: 'html',
url: 'Partner/PartnerApplications',
success: function (data) {
var result = data;
$('tabledata').html(result);
},
error: function (error) {
alert('Ошибка AJAX-запроса. Обновите страницу!');
}
});
}
</script>
Fail is called and the page is completely updated.
Here's updated content in the view:
<div id="target">
#Html.Partial("~/Views/Partner/PartnerApplicationsPartial.cshtml")
</div>
controller's code:
[HttpPost]
public ActionResult PartnerApplications(int[] ApplSort, int[] radio_check_val, int[] myid)
{
MordaPartner MrdPrt = new MordaPartner(Server, Request);
if (Request.IsAjaxRequest())
{
var obj = MrdPrt.morda_obj.CookieAuthenticationPartner(Server, Request, Response, MrdPrt.PartnerLogin, MrdPrt.PartnerPassword);
if (obj != null)
{
//alert("ApplSort=" + ApplSort + ";" + "ApplSelectOffer=" + ApplSelectOffer + ";" + "ApplSelectAuction=" + ApplSelectAuction + ";" + "ApplSelectNoOffer=" + ApplSelectNoOffer);
var objs = from s in MrdPrt.morda_obj.entities.applications where s.application_user_city == obj.partner_city & s.application_blocked != 1 orderby s.application_id ascending select s;
return Json(new { data = this.RenderPartialViewToString("PartnerApplicationsPartial", objs) });
}
else
{
return RedirectToAction("Registration");
}
}
else { return RedirectToAction("PartnerApplications"); }
}
RenderPartialViewToString it was taken from here: http://www.c-sharpcorner.com/blogs/7150/implementing-renderpartialviewtostring-in-asp-net-mvc-3.aspx
script is loaded:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
What am I doing wrong?
I think your easiest solution since you are just wanting to do a partial...
#using( Ajax.BeginForm( "PartnerApplications",
null,
new AjaxOptions() {
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target",
LoadingElementId = "AjaxSearch" },
new { id = "UserSearchForm" } ) ) {
<input type="text" id="id" name="id" placeholder="Enter Search" />
}
This is an ability that is built into MVC that makes it VERY easy to update an element with the results of a partial.
All this is saying is that you want a new Ajax Form that calls the PartnerApplications Action. You want the action called with an HttpMethod that is a POST request and you want the results to replace (InsertionMode.Replace) the existing elements in the target (whatever that may be) and while the request is taking place you want the element AjaxSearch visible (this is optional, but something I use to show that it's working).
This will generate the required JavaScript for you and until you get into something beyond simply returning a partial works EXCELLENT!
EDIT: Also you will need to update your Action...
return Json(new { data = this.RenderPartialViewToString("PartnerApplicationsPartial", objs) });
needs changed to....
return PartialView("PartnerApplicationsPartial", objs);
EDIT BASED ON COMMENTS:
Without knowing the data better that is being sent to the server I can't tell you what to write in order to replace that method. I would however look at the properties of new AjaxOptions(){} because it has some additional properties that allow you to specify the name of a JavaScript function to call on four states (before/after/success/fail) of the Ajax request. So if you are needing to calculate something you can do this by specifying a JavaScript function that will be processed before the Ajax request is submitted.
Also you are doing a lot more work then needed to get the selected radio button value (especially since you are using jQuery).
You can replace...
var radio_check_val=0;
for (i = 0; i < document.getElementsByName('radio').length; i++) {
if (document.getElementsByName('radio')[i].checked) {
radio_check_val = document.getElementsByName('radio')[i].value;
}
}
with something similar to....
var radio_check_val = $('radio').filter(':checked').val();
//this will only work if there is only one set of radio buttons on the page.
//Otherwise you will need to add a name to the selector.
You should not RedirectToAction. Instead of redirect return PartialView('Registration');.
Related questions:
MVC Return Partial View as JSON.
Load PartialView for AJAX and View for non-AJAX request
I have the following code which is not working as expected. I want to have a retrun from the controller and using alert display the value returned from the controller.
$('#change').dialog({
autoOpen: false,
width: 380,
buttons: {
"Close": function() {
$(this).dialog("close");
},
"Accept": function() {
var test = $("#ChangePasswordForm").submit();
alert(test);
}
}
});
In my controller I want to return a string
[AcceptVerbs(HttpVerbs.Post)]
public string ChangePassword(string Name)
{
var msg = "Cool!";
if (name != null)
return msg;
}
How can I do that?
Your controller needs to return a type that derives from an ActionResult.
If you want to display a simple confirmation message you can add it to the ViewData bag like this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ChangePassword(string name)
{
if (!string.IsNullOrEmpty(name))
{
ViewData["msg"] = "Cool";
}
return View();
}
Then, in your view, check for the presence of the value, and display it if it's there:
<% if(ViewData["msg"] != null) { %>
<script type="text/javascript">alert('<%= ViewData["msg"].ToString() %>')</script>
<%} %>
First of all, im assuming you are using an ajax form for this. I also assume you have a or something for putting your text into. All you have to do is set the UpdateTargetId to point at the id of the element you want to update with the text
<%using (Ajax.Form("ChangePasswordForm", new AjaxOptions { UpdateTargetId = "result" })) %>
.
[HttpPost]
public ContentResult ChangePassword(string s)
{
var msg = "Cool!";
if ( s != null ? return Content(msg, "text/plain") : return Content("An error has occured", "text/plain") );
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ChangePassword(string Name)
{
var msg = "Cool!";
if (name != null)
{
return Content(msg, "text/plain");
}
else
{
return Content("Error...", "text/plain");
}
}
Don't submit the form as that will perform a postback and cause the dialog to be removed.
Instead perform an AJAX post to the Controller Action and return a JsonResult containing the data.
Hook into the success callback from the Ajax request, and call alert passing the data from the Json object.
You'll probably wan't to use a loading mask after clicking submit so the user knows something is going on.
I am trying to implement a feature similar to the Related Questions on StackOverflow, I am doing this in MVC.
$().ready(function() {
var s = $("#Summary").val();
$("#Summary").blur(function() { QuestionSuggestions(s); });
});
function GetPastIssues(title) {
$(document).ready(function() {
$.ajax({ type: "POST",
url: "/Issue/GetSimilarIssues",
contentType: "application/json; charset=utf-8",
dataType: "xml",
dataType: "json",
data: "{'title':'" + title + "'}",
processData: false,
error: function(XMLHttpRequest, textStatus, errorThrown) { ajaxError(XMLHttpRequest, textStatus, errorThrown); },
success: function(xml) { ajaxFinish(xml); }
});
});
function ajaxFinish(xml) {
if (xml.d != "NO DATA") {
$('#question-suggestions').html(xml.d); //alert(xml.d); // This ALERT IS returning undefined
$('#question-suggestions').show();
}
}
The data being returned from my controller is 'undefined', as shown by the commented line in ajaxFinish.
What am I doing wrong?
//[AcceptVerbs(HttpVerbs.Get)]
[JsonParamFilter(Param = "title", TargetType = typeof(string))]
public ActionResult GetSimilarIssues(string title)
{
var issues = _db.GetSimilarIssues(title).ToList();
if (title == null || issues.Count() == 0)
return Json("NO DATA");
string retVal = null;
foreach (Issue issue in _db.GetSimilarIssues(title))
{
retVal += "<div class='answer-summary' style='width: 610px;'>";
retVal += "<a href='Issue.aspx?projid=" + issue.ProjectId.ToString() + "&issuetypeid=" + issue.IssueTypeId.ToString() +
"&issueid=" + issue.IssueId.ToString() + "'>";
retVal += issue.Summary;
retVal += "</a>";
retVal += "</div>";
}
return Json(retVal);
}
EDIT:
I think what will help me learn and implement a solution to my senario is if I can get some insight into how StackOverflow implements this javascript method:
function QuestionSuggestions() {
var s = $("#title").val();
if (s.length > 2) {
document.title = s + " - Stack Overflow";
$("#question-suggestions").load("/search/titles?like=" + escape(s));
}
Looks like a 'Search' folder in the Views folder and a PartialView called 'Title'. A SearchController.cs with the following method:
public ActionResult titles(string like)
{
// HOW TO IMPLEMENT THIS
return PartialView("Titles");
}
What goes in the Titles.ascx to display the html?
The purpose of JSON() is to return a JSON object -- not HTML. JSON object would be something like {html_value: "<li>blah" }. I'm not sure what your ajax request is expecting. If it is expecting JSON (you have dataType set twice), then you can do something like with an anonymous object:
return Json(new {html_value = retVal});
However, if you want to return HTML from your controller -- don't. That's exactly what a view is for. Create a view without any master page and do the loop and return the HTML that way. Ajax apps can take this HTML and drop it wherever necessary.
In fact, while you technically could do the above anonymous object (where you return the html inside of a json object), this isn't what it's for. If you want to use JSON you should be returning values, and letting the javascript on the client format it:
I'm not sure how "heavy" your issues object is, but assume that it only has the three fields you're using. In that case, do:
return Json(issues);
EDIT:
Well, I think "Best Practice" would be to return just the values via JSON and format within the javascript. I'm not familiar enough with JSON(), but I know it works (I'm using it for something simple). Try creating a simple issues object with just those three values and
return Json(issuesTxfr);
You don't need to use partialviews as you're calling from a controller. Just think of it as a very simple view. Here's an example of mine (please don't notice that I'm not following my own JSON advice -- this is from a while back and I now cringe looking at it for a few reasons):
public ActionResult Controls_Search_Ajax(string q, string el)
{
...
ViewData["controls"] = controls;
ViewData["el"] = el;
return View();
}
and
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Controls_Search_Ajax.aspx.cs" Inherits="IRSoxCompliance.Views.Edit.Controls_Search_Ajax" %>
<% var controls = ViewData.Get<IEnumerable<IRSoxCompliance.Models.Control>>("controls");
var el = ViewData.Get<String>("el");
if (controls != null)
{
foreach (var c in controls)
{
%><%= c.Control_ID %>***<%= c.Full_Control_Name %>***<li id="<%= el %>:li:<%= c.Control_ID %>"><span class="item"><%= Html.BreadCrumb(c, false) %></span><span class="actions">Remove</span><br></li>
<% }
}
%>
Note the fact that there is no master page specified.
You could always return HTML as a string. I'm not saying that this is necessarily the way to go, and I do agree with James Shannon about not using JSON to return HTML.
Phil Haack wrote an excellent article about this on his blog back in May.