reload partial view with jquery - c#

i've created a upload form for 1 image. after the image is stored on the filesystem i want to refresh the partial view (which then should display the image).
After uploading a image, jQuery runs the Url.Action but doesn't render the partial view which gets returned from the Action "WebAuftragImageRefresh"...
Maybe you have an idea?
Regards,
float
BTW. Why is the code-block not ignoring html tags?
View:
http://codepaste.net/co1gu9
Partial-View:
http://codepaste.net/1rxq2d
Controller:
http://codepaste.net/j8kugj

In your view you're doing:
$.get('#Url.Action("WebAuftragImageRefresh", ViewContext.RouteData.Values["Controller"].ToString(), new { id = ViewBag.AuftragGUID })', {...
But where exactly is this piece of jQuery code getting the ViewBag.AuftragGUID from which is actually being set in the WebAuftragImageRefresh ActionResult?

Related

Refresh view component .net core RC2

I have one normal view with two views components inside. Normal view have also a button and the both views components have a button too.
How i can refresh the views components after clicking on button from normal view?
And how i can refresh second view component after clicking on botton from first view component?
I already tryed to find a way, but without success!
Best regards
Ultimately view components generate HTML markup when razor executes that code. If you want to update some part of your HTML page (like a partial page update), you may consider using jQuery and ajax to do that.
Something like this.
$(function(){
$("#SomeButton").click(function(e){
e.preventDefault();
//make the ajax call and get new data/markup for the
// div rendered by your first view component and update it
var url="TheUrlToActionMethodWhichReturnsPartialMarkup";
$("#DivIdA").load(url);
});
});
You can do the same thing for updating other parts of your page ( markup generated by view component 2) as well. Update the url to an action method which returns a partial view result.
I tried this:
`$("#buttonrefresh").on("click", function () {`
`$.ajax({`
`type: "GET",`
`url: '#Url.Action("VCTest")'`
`(function (result) {`
`$("#show").html(result);`
`});`
`});`
This script is to refresh one view component after clicking on button from normal view.
VCTest is the name of the view component.
show is the name of the div where the view component is called.

Returned View does not open as a separate view in MVC 4

I have a main view which is having a partial view placed inside a ajax form. Upon the form submission I am returning another View but the problem is that the returned view is rendered in the earlier loaded main view only. It does not opens as a separate view.
I think that the problem could be due to the use of ajax form which is calling the controller action method but I am not sure.
Any help would be appreciated .
This is the expected behavior with ajax. Btw you are not using Ajax, but Ajah as you are returning HTML and not XML/JSON.
Ajax will not open a new page or popup without writing javascript code. Ajax is a way to transmit data between the current page and the server.
If you use Ajax.BeginForm, you can specify the ID of the dom element in which the HTML returned from your action should be attached.
If you use Html.BeginForm, you are not using ajax at all.

Asp.Net MVC and Partial Views and Mixing Ajax.BeginForm and Html.BeginForm

I have a some partial views that generally make use of small model data. I have been using Ajax.BeginForm to with js functions defined in the AjaxOptions to catch the partial postback's success or failure when that part is submitted.
I saw no performance penalty as my data has been light. Currently, I have been working on a piece that returns an HTMLFragment from an SSRS report rendered as format "HTML40" in the controller. The JSON serialization of the html portion is taking a long time and I no longer see it as an option. When I changed the Ajax.BeginForm to Html.BeginForm and rendered the report upfront then the payload is lighter and takes less time to render but now I am stuck. How do I issue refresh commands without loading the partial again? This is why I used Ajax.BeginForm in the first place :( Perhaps there is a better way to load the data than what I am doing. I have started looking into callbacks and somehow getting the report pieces a raw byte[] or string as opposed to using json serialization.
Thanks
You can load a whole partial into a div using .load() jQuery function:
$("#someButton").click(function(){
$("#someDive").load("/url", {type: 'POST'}, function(){
});
});
Now, when you click on #someButton, an AJAX call will be made to /url. The /url can return a PartialView that will be loaded directly into your div:
//controller URL
[HttpPost]
public ActionResult Index(){
return PartialView("MyPartialView");
}
You can pass in models as you'd do to regular view.

How to update part of a cshtml shared layout on intervals?

I want to modify the content of a div in my shared layout when there is an update at my database. Whats the best way to go about it ? Timers to check database + somehow update view from controller ? In view c# functions ? ajax ?(don't know much about it) or some other way ? Thanks in advance.
Use setTimeout utility of javascript to get timer behavior.
Create a Controller Action and its associated partial view which will have the content you need to load dynamically. You can return a formatted Html from the view or a structured Json object from the controller action whichever is suitable for you..
considering that your following is your DIV tag.
<div id="dynamicContent"></div>
use
$(function(){
var function updatecontent()
{
$("#dynamicContent").load(URL)
setTimeout(updatecontent,5000);
}
setTimeout(updatecontent,5000);
});
to load content dynamically, url would be
YourDomain.com/Controller/Action
$.load()
will load the content of partial view using Ajax, and you will get a nice behavior on page.

Updating partial view with Jquery in ASP.NET MVC C#

I am using MVC C# along with Jquery.
I have a partial view in a rather large page that has a number of tabs.
On a click of a checkbox, I like to update the partial view WITHIN the form.
What I am getting instead is just the partial view
Here is my code in Jquery:
$('#activelist,#inactivelist').change(function () {
var status = 'inactive';
window.location.href = '#Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status;
});
Any idea on how I could update the partial view within a form in terms of how I would make a call to it?
Here is the code for the PartialView
return PartialView(Kits);
As mentioned, what I see is just the partial view displayed and not the whole form.
window.location.href will reload the entire page. You need to reload some part of your page without a complete reload. We can use jQuery ajax to do this. Let's Find out what jQuery selector you can use to get the Partialview.
For example , Assume your HTML markup is like this in the main form ( view)
<div>
<p>Some content</p>
<div id="myPartialViewContainer">
#Html.Partial("_FeaturedProduct")
</div>
<div>Some other content</div>
</div>
And here the DIV with ID myPartialViewContainer is the Container div which holds the content of the partial view.So we will simply reload the content of that div using jQuery load method
$(function(){
$('#activelist,#inactivelist').change(function () {
var id="someval";
var status = 'inactive';
$("#myPartialViewContainer").load('#Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status)
});
});
You are redirecting the user, via the window.location.href property, to the URL of your partial, hence only displaying that partial.
You should instead do an AJAX call to the partial to retrieve it's HTML and then use something like the .append method to add it to whatever container element you want it to be added to.
EDIT: The .load() jQuery ajax method is actually better for this specific situation.

Categories

Resources