I have an action that returns ViewResult (it's a detail form, public ViewResult AddFoo(long id) and I need to display this result in a lightbox
My first idea was to generate a div with an iframe, but than I don't know how am I going to close (hide the div) this lightbox on submit
Other thing that I could do is take somehow the generated html from the action (from <body> to </body>), and put it inside the div instead of the iframe
How do you do this kind of stuff, I think there should a better way
Generally, when you want to display a view in the context of another page, you return a PartialViewResult instead of a ViewResult. Then you can write JavaScript like:
$("#someDiv").load("/path/to/action");
Related
I have this contact form which I want to use on two pages (two views) in MVC 5.x (razor viewengine) So I have put the form in an partialview called _Contact and I have read that RenderAction is the best approach if you do not have the required data for the partialview in your model and if it is more standalone (seperate from the rest of the view)
So I call it like this:
#{ Html.RenderAction("SendMail", "Uk");}
My Uk controller has these two methods:
[HttpGet]
public PartialViewResult SendMail()
{
return PartialView("_Contact");
}
[HttpPost]
public PartialViewResult SendMail(FormCollection fc)
{
// send mail using values out of the form (sorry did not feel like building a complete model for it
ViewBag.Succeed = true;
// if smtpclient could not reach server etc. it returns false
return PartialView("_Contact");
}
it all works, but the PartialView is only rendered, not on the placeholder where i call the RenderAction. It works all great, but after the post it just displays the partial view and not the "parent view" and the shared layout view etc. I hope that I made myself clear. Please let me know if I need to add more info.
This is the BeginForm from my shared view:
using (Html.BeginForm("SendMail", "Uk", FormMethod.Post))
It will not work as expected for your current code, because when you post the form, it returns Partial View not complete View. If you want to get only partial view then you have to submit your form via Ajax.
In ajax's success handler you will get HTML of your partial view and that you can put in a DIV tag of partial view container.
This link will give you a better idea about Posting Partial View via Ajax.
ASP.NET MVC Partial view ajax post?
I am after creating something like a ContentResult, but have it render within the #RenderBody() tag of a masterpage. Is this possible? I can't seem to find a clear answer for it.
No; you can't do that.
Instead, you can make an empty Razor view that simply renders HTML from its model.
You can have an action method return a ContentResult, and then invoke it in the master page by doing:
#Html.Action("Action", "Controller")
I'm not sure what you mean by doing it in #RenderBody, but you can do it within the master page itself, or within each content page.
The content will be generated in the page; you could also use a partial view approach too.
I have a controller:
public ActionResult Index()
{
return View();
}
public ActionResult Button1()
{
return View();
}
MySite/MyController/ renders the site with 3 buttons and a div.
Buttons redirect to:
MySite/Controller/button1
MySite/Controller/button2
MySite/Controller/button3
I would like that when the users clicks button1 it renders MySite/MyController/ with the content of public ActionResult Button1() in the div.
same goes for botton 2 and 3. And if the users go directly to MySite/Controller/button2 it should render the Index with ActionResult Button2 in the div from the beggining.
Is there an easy way to do this? Do i need to do ajax to replace the content of the div, or should i just make the buttons a partial view and render them on the 4 pages.
If its easy with ajax, i would like that as the page dont need to refresh, but just load in the content. But i am not sure how i would make it render the pages correctly if the user goes to MySite/Controller/button2 directly.
There are a few valid options that I see here:
Have each button load a new page with their content on it.
Include each button content as a PartialView in a single page, and use javascript to change the div content without AJAX.
Don't include any of the button contents, and load them all through AJAX.
Include the first visible button content, and load the others through AJAX (if these are static content then you can design your script to store the values so each one only has to load once.
Personally, I would try to do a combination of 1 and either 2, 3, or 4 (depending on use case). This way the basic functionality of the site works without javascript, but you can still get the benefits of jQuery/AJAX.
I'm working on a site that has routes to actions which render Partial Views. A lot of these partial views are components which together make up a complete page.
For instance on a search page I'm working on has a text box, a list of tabs, and a Table.
Seach of these can be accessed with a URL similar to
/Search/SearchPanel
/Search/Tabs/{SearchTerm}
/Search/ResultsTable/SearchTerm?tab=[currently selected tab]
and these are all rendered on with a RenderPartial on my Index page.
When the page loads, it will display each of these components the way I want it. But at the moment there's nothing stopping a user from going directly to the url
/Search/Tabs
to render only a tab control which is meaningless outside the context of the rest of the elements on the page.
Is there a way for me to prevent this?
Have you tried marking your Controller method as private?
private PartialViewResult MyPartialResultMethod()
This should allow you to call it from within your code to build up your pages and disallow any public access such as through a URl.
I'm testing this now to make doubly sure my answer is correct so I'll update as I test.
In your tabs example you could simply restrict access by using a second controller method for Tabs that's private.
So you'd have something that looks like:
public ActionResult Tabs(string searchTerm) // When a search term is passed.
and
private ActionResult Tabs() // When no search term is passed.
You could create an ActionFilter which checks if the Request.IsAjaxRequest() is true. If it's not (meaning the user is calling the view directly), re-direct accordingly.
I have an MVC Controller that runs through a process, sets some View Data, and then returns the results of this data back to the user in a View. The process time is dependent on the amount of data that is being processed. I need a good way to display an animated .gif within the View while the process is running, letting the user know that something is going on.
I've looked at various AJAX methods and partial views but still cannot find a good way to accomplish this. What I really wished I could do was have an ActionFilter that would return a View or Partial View during the OnActionExecuting event that displays this animated .gif, then once the Controller completed processsing and returned the ViewData, the view or partial view with the actual View Data could be displayed.
It also seems like jQuery would be able to provide a nice asynchronous way to call the controller action in the background and then render the View. Any help would be appreciated.
In your controller:
public JsonResult GetSomething(int id)
{
return Json(service.GetSomething(id));
}
In the view (javascript, using JQuery):
$('#someLink').click(function()
{
var action = '<%=Html.ResolveUrl("~/MyController.mvc/GetSomething/")%>' + $('#someId').val() + '?x=' + new Date().getTime();
$('#loading').show()
$.getJSON(action, null, function(something)
{
do stuff with something
$('#loading').hide()
});
});
Note that this assumes a route where 'id' comes after action. The 'x' parameter on the action is to defeat aggressive caching in IE.
In the view (markup):
<img id="loading" src="images/ajax-loader.gif" alt=""/>
<!-- use a css stlye to make display:none -->
Get loader gifs here.
Also note that you do not have to do this with Json. You can fetch other things like HTML or XML from the controller action if you prefer.