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.
Related
I have some action's views that are dependant on settings from DB (for example display textbox or not). Settings are changed in admin controller.
What I'd like to achieve is to have the preview of the changed views in admin's sidebox (right side of the screen) after the changes will be saved to DB.
Is there a way to get View result of another action (casually returns View()) with button (Save and Preview) click in form of string (HTML) to display in the sidebox?
Or maybe has anyone other and better idea?
Yes. They're called child actions. Simply, you just call the action you want rendered via Html.Action:
#Html.Action("SomeAction", "SomeController")
However, there's a couple of things to keep in mind. First, your child action should return PartialView. Otherwise, you'll get the full layout rendered again where you call the action. If you want to use the same action for both a regular view and as a child action. You can branch your return:
if (ControllerContext.IsChildAction)
{
return PartialView();
}
return View();
Second, if you only return PartialView, then the action should not be available to directly route to. Otherwise, someone could enter a URL in their browser to go to this child action and only the partial view would be returned, devoid of layout. You can prevent this from occurring using the ChildActionOnly attribute:
[ChildActionOnly]
public ActionResult MyAwesomeChildAction()
{
...
}
Then, this action will only be available to be called via Html.Action.
I have a MVC 4 application which has a single home view. I have three link buttons and want to load three different forms dynamically based on the button click. I am using mvc partial views. So, if I click on button-1 it should load partialView-1 and should also send value-1 from the corresponding text box to partialView-1.
I am looking for mvc inbuilt approach rather than doing heavy javascript work.
You can do this like this.
A. Have different methods inside your controller returning PartialViewResult
[HttpGet]
public PartialViewResult GetPartialView1(int value)
{
return PartialView("_PartialView1"); //This view should exist in appropriate views folder.
}
B. Your buttons on the left handside should be #Ajax.ActionLink
#Ajax.ActionLink(
"Button1",
"GetPartialView1",
new {
value1 = 1},
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "righthandsidebox"
}
)
C. The UpdateTargetId = "righthandsidebox" that should be the id of the div on the right hand side. Contents of righthandsidebox will be replace by the PartialView
There is nothing built into MVC to do this as what you want to do happens on the front-end. If you want to be dynamic you have to use javascript.
If you want to avoid javascript then it can't be dynamic. You would wrap each button and value in a form and have it submit its value to the back-end and by what is passed you then you have your view render what partial you want. But this wouldn't be dynamic as want it to be.
I'm not sure what you consider as "heavy" when it comes to javscript? With jQuery what you want you do doesn't take much.
(lighter javascript work) You can either have your View place all of the partial views on the page with a class that sets them to display:none then just javascript to simple change out the class to view the partial you would like. But you have a lot of partials then you can do the following.
Or have the buttons make an `ajax call to the back-end fetching the partial that you need.
The bottom line is... if you want dynamic you need to use javascript.
I have a details view for courses. On that view, I have a lot of information, so I broke it up into nice JQuery UI Tabs sections and everything is great...except...
Some of the tabs have forms on them. For instance, upload course materials, add tasks, edit rosters, etc... after I submit any of the forms, I want to perform the action on my controller and then redirect to the details view again, only this time I want to be anchored to the tab that I was on before I submitted. According to the Tabs documentation, it's just as simple as adding #tabs-4 or #tabs-n to the end of the URL, but I'm not sure how to tell my controller how to do that...
so if one of my form's controller action is (simplified)
public ActionResult CreateTask(Task task)
{
db.Add(task);
db.Save();
//I want to go to /details/id + #tabs-4. How?
return RedirectToAction("Details", new { id = task.CourseID });
}
and then details is (simplified)
public ActionResult Details(int id)
{
Course course = db.GetCourse(id);
// How do I tell the view to open #tabs-4 or 3 or 2??
return View(course);
}
Additionally, I'd like to have other methods that redirect to the same details view, but instead give it a #tabs-3, #tabs-2, etc, so I assume I have to set that up in the first method, and pass it to the details action.
var url = Url.RouteUrl(new { action = "Details", id = task.CourseID });
return Redirect(url + "#tabs-4");
You can use UrlHelper.GenerateUrl method, passing your anchor as fragment.
I would add an extension method to UrlHelper to wrap a call to GenerateUrl, as it takes 10 parameters and you do not need to provide all of them manually in all the cases.
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 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");