function BrowserFolderSearch() {
$.ajax({
type: 'POST',
url: '@Url.Action("Index", "TreeView")',
data: {
status: 'OK',
},
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (result) {
alert('Success');
//$('#demo1').html(data); //This would output your partial view within your demo1 <div>
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.getAllResponseHeaders);
alert(xhr.error);
alert(xhr.status);
alert(thrownError);
}
});
}
Index is my partial view and TreeView is the controller. In my Index action I have a HTTP post version:
public PartialViewResult Index(string status)
{
_folderModel.BuildFolderBrowserTree();
return PartialView(_folderModel);
}
Once again everything seemed to go well server side but the AJAX call gave a 500 error and Fiddler got this:
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.ArgumentException: Invalid JSON primitive: status.
It happily recursively builds through all of the folders and then comes the disappointing part. The view loads nothing it stays exactly the same as it was. The strange thing is if I populate the model when this partial view is loaded without bothering waiting
for the user clicking anything, the partial view loads with data.
As Xequence mentioned, you will need to likely check that the name of your View matches the name of your Controller Action or that you are explicitly defining the View that needs to be used within your Controller Action.
What does your BuildExcludedPaths Controller Action currently look like?
My partial view is called Index and even though earlier I was calling an incorrect named Action I am now calling the
Index action as detailed in the last post.
The BuildExcludedPaths action is not really anything more than a way of keeping tags on any filter criteria the user may click on in fact I will edit those bits out of the last post
As I said the partial view goes through the whole process of building all of the mark up and does not show any of the new mark i.e. stays the same. Like I said id you make the partial view load with a full compliment of data it renders. It is only an issue
in the scenario of letting the user press the button to perform this, which is how it will have to work.
Another issue to consider is that loading Partial Views in this way can often lead to them being cached and not appearing to work. You may want to consider setting the cache property of your AJAX call to false as well to avoid any issues :
$.ajax({
type: 'POST',
url: '@Url.Action("Index", "TreeView")',
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
//alert('Success');
//$('#demo1').html(result); //This would output your partial view within your demo1 <div>
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(xhr.error);
}
});
Hi Rion I tried what you suggested and also tried adding [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] over my Controller action but the page stays as is. It does look like the partial page has cached somehow.
Have you tried uncommenting the alert within your success callback? Is it firing? If so, you might want to include your result in the alert to see if the proper HTML is being returned :
bigredhf
Member
48 Points
81 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 06:14 PM|LINK
So I have now changed the AJAX call like so:
function BrowserFolderSearch() { $.ajax({ type: 'POST', url: '@Url.Action("Index", "TreeView")', data: { status: 'OK', }, dataType: 'json', contentType: "application/json; charset=utf-8", success: function (result) { alert('Success'); //$('#demo1').html(data); //This would output your partial view within your demo1 <div> }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.getAllResponseHeaders); alert(xhr.error); alert(xhr.status); alert(thrownError); } }); }Index is my partial view and TreeView is the controller. In my Index action I have a HTTP post version:
public PartialViewResult Index(string status) { _folderModel.BuildFolderBrowserTree(); return PartialView(_folderModel); }Once again everything seemed to go well server side but the AJAX call gave a 500 error and Fiddler got this:
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.ArgumentException: Invalid JSON primitive: status.
Xequence
Contributor
4313 Points
1528 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 06:17 PM|LINK
data: $("myIdOfMyFormIWantTOPostAndSerializeIntoActionParameter").serialize(),
decorate your actionresult with httppost so you can adhere to mvc pattern get,post,redirect pattern
Credentials
bigredhf
Member
48 Points
81 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 06:32 PM|LINK
Thanks for this I am getting somewhere now. But I have been on this all day so I better put it down and spend a bit of time with my wife.
Will report back very soon.
Cheersssss
Xequence
Contributor
4313 Points
1528 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 06:38 PM|LINK
I know what you mean haha.
Credentials
bigredhf
Member
48 Points
81 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 09:16 PM|LINK
Ok to be fair I am making progress albeit thanks to you for helping. No errors in the AJAX call.
Here is my partial view:
@using HomeController.Web.UI.Models @using System.Collections @using HomeController.Domain.Configuration.Generic.Entities @model HomeController.Web.UI.Models.FolderModel <div id="MediaPlayerAddMediaToLibraryControlPanel" class="fLeft"> <div> <p>Please use these filters in order to improve performance of the search</p> </div> <div id="MediaPlayerAddMediaToLibraryAvailableDrives" class="fLeft"> <p>Select which drives you want the folder browser to look at</p> @{ foreach (string availableDrive in @Model.AvailableDrives) { if (Model.ExcludedDrives.Contains(availableDrive)) { <input type="checkbox" id="@availableDrive" name="@availableDrive" value="false"/ onclick="BuildExcludedDrives(this)">@availableDrive<br> } else { <input type="checkbox" id="@availableDrive" name="@availableDrive" value="true" checked="checked" onclick="BuildExcludedDrives(this)"/>@availableDrive<br> } } } </div> <div id="MediaPlayerAddMediaToLibraryExcludedPaths" class="fLeft"> <p>Exclude paths you don't want the folder browser to look at</p> @{ foreach (string excludedPath in @Model.ExcludedPaths) { <input type="checkbox" id="@excludedPath" name="@excludedPath" value="false" checked="checked" onclick="BuildExcludedPaths(this)"/>@excludedPath<br> } } </div> <div id="MediaPlayerAddMediaToLibrarySearchButton" class="fLeft"> <input id="BtnBrowserFolderSearch" type="image" src="~/homecontroller.web.ui/Images/Zoom.png" class="Buttons" onclick="BrowserFolderSearch()" title="Explore the servers directory based on the filters provided"/> </div> </div> <div class="clear2"></div> <div id="MediaPlayerAddMediaToLibraryTreeView" class="fLeft"> @helper TreeView(Folder folder) { for (int i = 0; i < folder.FolderCollection.Count; i++) { <li onclick="FolderClicked(this)" id= "@folder.FolderCollection[i].FullPath"> <a href="#"><span>@folder.FolderCollection[i].Name</span></a> <ul> @TreeView(folder.FolderCollection[i]) </ul> </li> } } <div id="container"> <div id="demo1" class="demo" style="height:800px;"> <ul> @TreeView(@Model) </ul> </div> </div> <div> <script type="text/javascript" class="source below"> function BrowserFolderSearch() { $.ajax({ type: 'POST', url: '@Url.Action("Index", "TreeView")', contentType: "application/json; charset=utf-8", success: function (result) { //alert('Success'); //$('#demo1').html(data); //This would output your partial view within your demo1 <div> }, error: function (xhr, ajaxOptions, thrownError) { //alert(xhr.error); } }); } $(function () { $("#demo1") .jstree({ "plugins": ["themes", "html_data", "ui", "crrm", "hotkeys"], }) // EVENTS .bind("loaded.jstree", function (event, data) { }); }); function FolderClicked(li) { } </script> </div> </div>Here is my Action in my Controller:
[HttpPost] public PartialViewResult Index(string status) { _folderModel.BuildFolderBrowserTree(); return PartialView(_folderModel); }When the code returns I have a fully populated model excellent. My control builds without any problems and when the code gets to:
@helper TreeView(Folder folder) { for (int i = 0; i < folder.FolderCollection.Count; i++) { <li onclick="FolderClicked(this)" id= "@folder.FolderCollection[i].FullPath"> <a href="#"><span>@folder.FolderCollection[i].Name</span></a> <ul> @TreeView(folder.FolderCollection[i]) </ul> </li> } } <div id="container"> <div id="demo1" class="demo" style="height:800px;"> <ul> @TreeView(@Model) </ul> </div> </div>It happily recursively builds through all of the folders and then comes the disappointing part. The view loads nothing it stays exactly the same as it was. The strange thing is if I populate the model when this partial view is loaded without bothering waiting for the user clicking anything, the partial view loads with data.
Is there something I am missing?
Rion William...
All-Star
27906 Points
4618 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 09:30 PM|LINK
As Xequence mentioned, you will need to likely check that the name of your View matches the name of your Controller Action or that you are explicitly defining the View that needs to be used within your Controller Action.
What does your BuildExcludedPaths Controller Action currently look like?
bigredhf
Member
48 Points
81 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 09:43 PM|LINK
Hi Rion,
My partial view is called Index and even though earlier I was calling an incorrect named Action I am now calling the Index action as detailed in the last post.
The BuildExcludedPaths action is not really anything more than a way of keeping tags on any filter criteria the user may click on in fact I will edit those bits out of the last post
As I said the partial view goes through the whole process of building all of the mark up and does not show any of the new mark i.e. stays the same. Like I said id you make the partial view load with a full compliment of data it renders. It is only an issue in the scenario of letting the user press the button to perform this, which is how it will have to work.
Rion William...
All-Star
27906 Points
4618 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 09:46 PM|LINK
Another issue to consider is that loading Partial Views in this way can often lead to them being cached and not appearing to work. You may want to consider setting the cache property of your AJAX call to false as well to avoid any issues :
$.ajax({ type: 'POST', url: '@Url.Action("Index", "TreeView")', cache: false, contentType: "application/json; charset=utf-8", success: function (result) { //alert('Success'); //$('#demo1').html(result); //This would output your partial view within your demo1 <div> }, error: function (xhr, ajaxOptions, thrownError) { //alert(xhr.error); } });bigredhf
Member
48 Points
81 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 09:58 PM|LINK
Hi Rion I tried what you suggested and also tried adding [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] over my Controller action but the page stays as is. It does look like the partial page has cached somehow.
Rion William...
All-Star
27906 Points
4618 Posts
Re: How to update Partial View with doing a submit
Feb 16, 2013 10:03 PM|LINK
Have you tried uncommenting the alert within your success callback? Is it firing? If so, you might want to include your result in the alert to see if the proper HTML is being returned :
success: function(result){ alert(result); }