I am using mvc 6 and I would like to "open" component view by using some button onClick.
I can display it by using
<div id="DialogDiv">
#Component.Invoke("MyComponent");
</div>
but I would like to do it so that some button onclick method would call that invoke method and give that div as a reference. Is that possible?
I assume that you want to render component by using ajax request. Since MVC6-beta7 you can do this by utilising View Component Action Result:
See:
https://github.com/aspnet/Mvc/issues/2338
https://github.com/aspnet/Mvc/releases/tag/6.0.0-beta7
The idea for your scenario will be to use JavaScript and call action in controller which will return ViewComponentResult and then render result of that action into your page. You can do this by using jQuery, so it will look like:
$.get("/YourController/YourAction",function(data){
$("#DialogDiv").html(data);
});
Related
I have a main .cshtml view that uses jQuery $.Ajax to append returned PartialView result (e.g. return PartialView(partialView, model); ... from my controller action) to a div element on that main view page.
The main view page have inline javascript codes in it.
The partial view page also has some inline javascript codes in it.
The application runs OK. But at run time, I cannot see javascript codes from the partial view page with FireBug. I only see the javascripts of the main view page.
How can I see the javascript of the partial view page with FireBug? Please help.
Thank you.
you shouldn't put javascript code in a partial view since it gets inserted into the middle of the page. Put the javascript code for the partial into the main page. To fire events on that partial you need to tie them to the document
$(document).on('click', '.Class', function(){
// do something
});
where .Class is the selector for a field on your partial view. Let me know if you have any questions.
I am working on ASP.Net MVC 3 website which uses Razor view engine and Jquery
On homepage (or any page for that matter) I want to load sections of content using ajax, something like iGoogle.
I mean on page load
I want to call some HttpGet action methods each of which returns some
Html content
Until I get response these Div's showing "loading" graphics.
I am aware of Ajax.BeginForm and Ajax.ActionLink but in both the cases I need to click some UI element; I do not know how to use them on page load/ document.Ready?
I will be thankful even if I get some direction and not exact/complete code.
Okay, lets give you some direction, I'm going to show some code in jquery because its easy enough. lets go.
Html
<div id="SomeContent"> </div>
In your view
$(function(){ // this runs on on page load
LoadData('#SomeContent', #Url.Action("ActionName","ControllerName"));
});
in a javascript library file
function LoadData(target, url){
$.ajax({
beforeSend: startAnimation(target),
url : url,
success : function(result){ $(target).html(result); },
complete : stopAnimation(target)
});
}
function startAnimation(target){
//..add a loading image on top of the target
}
function stopAnimation(target){
// remove the animation gif or stop the spinning, etc.
}
your server side code
public ActionResult ActionName() {
... do things to get your model populated ...
return PartialView("SomeView", yourmodel);
}
additional thoughts:
this rough code loads a partial view into a div. The asychonous call begins when the dom is ready.
see http://api.jquery.com/jQuery.ajax/ for jquery ajax documentation
i like to use spin.js to show a loading icon becuase it is so darn easy and small.
I am having a kendoUI TabStrip widget control. In it, I have two tabs : products and support.
The two tabs are two different views. I have defined the tabstrip like this :
<div id="tabs">
<div>
<iframe src="../Products/Index"></iframe>
</div>
<div>
<iframe src="../Support/Index"></iframe>
</div>
</div>
And in script :
$("#tabs").kendoTabstrip({});
Then tabs with their respective view pages are coming. But the products and support pages will not open directly. I mean in the url bar when I enter localhost:4567/Product/Index, it will not open the page, it will only open when we select the tab.
I have defined for both controllers such actions :
[ChildActionOnly]
public ActionResult Index()
{
return View();
}
Then when I run the main page, it is getting an exception it will be called only by child action only. Where when I select the tab it should become child action.
How can I rectify that problem? I have not included :
#Html.action("Index","Products")
If I need to include that, where should I add that?
Hope you understand my question...
The ChildActionOnly attribute ensures that an action method can be called only as a child method from within a view. An action method doesn’t need to have this attribute to be used as a child action, but we tend to use this attribute to prevent the action methods from being invoked as a result of a user request. Having defined an action method, we need to create what will be rendered when the action is invoked. Child actions are typically associated with partial views, although this is not compulsory
So instead
#Html.action("Index","Products").
you should try
#Html.Partial("Products").
I load some PartialView in page as response to Ajax form post. This partial contains two Ajax.ActionLink by self. After response load ActionLinks doesn't work properly - it send request to server but doesn't updates UpdateTarget with returned content.
Seems like jquery-ui provided widgets (like draggable) can't bind to elements in way like this (code placed in partial view):
$(function(){ $('#target').draggable();});
I would appreciate for any solutions.
PS> ActionLinks starts work after target id correction, but jquery ui steel don't work
seems #target is not avilable when your code is binding the handler..
try using live(), or delegate(), or .on()
Solved by add named function in PartialView and call it in OnSuccess for Ajax.BeginForm. As I discover document.ready fires for ajax-loaded content before page is really updated.
Kinda New to Jquery and hit an issue regarding returned HTML. I am using the .load() function to load HTML returned from a jsp file - its all working grand except the returned HTML doesnt seem to allow further Jquery functions to be called on it.
i have a click and toggle combination running for "#showgame" - this id is in the returned HTML but clicking on it does nothing when it should. Do i have to update anything to tell jquery that this id now exists on the page after load() call?
Regards,
Cormac
You need to use the live() function to bind the click event.
$("#myelement").live("click", function() { });
Live binds the event to current and future elements that match the selector.
Read more at http://api.jquery.com/live .