I want to create a dynamic website in asp.net using MVC model from Visual Studio 2013.
All the columns will have dynamic content, each one changing it's content on different selections based on user actions or by the controllers.
How can I create those three dynamic columns?
I already have my layout in HTML and CSS but I need to separate those three columns and have the possibility to change their content from my controllers.
Later edit:
In my case I have two menus in the website, one to the left and the other one to the right. Actually they are three with the other one from the top. When I select something from the top, the menu from the left must be showed depending on the top selection.
You can populate each column by using ViewBag or ViewData. So in the Layout, use this data to pupulate this columns, for example:
1) Calling this action will change the content for something that you specify:
public ActionResult MyView()
{
// you can put anything in this ViewBag,
// a string, a list of something and then use it in the view
// Its dinamyc
ViewBag.Column1 = "My content column 1";
ViewBag.Column2 = "My content column 2";
ViewBag.Column3 = new string[] {"Product1", "Product1", "Product1"};
}
2) Consume this data in your layout to generate the dynamic content:
<div id='column1'>
#ViewBag.Column1
</div>
<div id='column2'>
#ViewBag.Column2
</div>
<div id='column3'>
<ul>
#foreach(var s in ViewBag.Column3)
{
<li>
#s
</li>
}
<ul>
You should take a look here for more information:
What is ViewData, ViewBag and TempData?
You should use Sections as well, take a look here:
ASP.NET MVC 3: Layouts and Sections with Razor
I would advise you to make three different Controller Actions. For Example:
public ActionResult Part1()
{
return View();
}
public ActionResult Part2()
{
return View();
}
public ActionResult Part3()
{
return View();
}
And then call them in your Common page.
Example:
<div class="row">
<div class="col-md-4">
#Html.Action("Part1")
</div>
<div class="col-md-4">
#Html.Action("Part2")
</div>
<div class="col-md-4">
#Html.Action("Part3")
</div>
</div>
You can have the selection criteria controls inside the view of the controllers. i.e. if you need a drop down list for the First Block. Place it in the Part1 View. Also to make it async you can have Ajax forms in all three views.
Related
I would like to pass csHtml to a ViewComponent like this:
<vc:some-component title="Title"
body="#Html.Raw("<div>this is a nice div, my name is #Model.Name</div>")">
</vc:some-component>
As you can see, I want to pass HTML that contains references to variables or the model (that's why I'm calling it csHtml and not just Html).
And here is the ViewComponent code:
<div>
<p>#Model.Title</p>
#Model.Content
</div>
Is this even possible? I've been searching and haven't found any examples of how to do this.
Edit: Got it working! Thanks everyone for your help.
Here is some sample code for how to do this:
Calling ViewComponent:
#{
Func<dynamic, object> children =
#<div>
<p style="color: white">aaaa</p>
<p style="color: white">bbbb</p>
<p style="color: white">bbbb</p>
</div>;
}
<vc:some-component body=#children>
</vc:some-component>
View Component content:
#model SomeComponentModel
<div>
#Model.Body("")
</div>
You should be able to add the parameters to the ViewComponent and pass them along towards the ViewComponent view itself as you go.
<vc:some-component title="Title"
body="#Html.Raw("<div>this is a nice div, my name is #Model.Name</div>")">
</vc:some-component>
or something similar to this
#await Component.InvokeAsync("SomeComponent", new { title="Title", body= Html.Raw($"<div>this is a nice div, my name is {Model.Name}</div>") })
Your viewcomponent IViewComponentResult would look something like this, using ViewBag just as example
public async Task<IViewComponentResult> InvokeAsync(string title, string body)
{
//...
ViewBag.Content = body;
ViewBag.Title = title;
//...
return View();
}
And then in the related ViewComponent View
<div>
<p>#ViewBag.Title</p>
#ViewBag.Content
</div>
Creating a more specific ViewModel to pass along would also be an option ofcourse
Yes it is possible, you have to make a workaround but it is achievable,this answer has an example of what you are looking for.
I'd like to get the name of my partial view in my layout page to determine which div is going to be active. Because of the design I cannot css this nicely so I went for a more sloppy approach.
In my _Layout.chtml The Renderbody loads my content. And here depending on which button I press, I get a map or a list.
These are both functions in my controller and what I would like to do is get the functionname or partial view so I can then decide which I want to show.
so I wanted to do something like this in my _Layout.chtml
#if ( get the controllername or view == mapname or listname)
{
<div>
#Html.Partial("tabMap")
</div>
}
else
{
<div>
#Html.Partial("tabList")
</div>
}
Any quick fix to do this ?
access the RouteData dictionary from the ViewContext Object
will be like this
#ViewContext.RouteData.Values["Controller"]
with the RouteData Dictionary you can get all the info needed about the controller , action and extra parameters names , depending on them output the data you want
I have two pages with two grids,
in my first page I have 10 editable rows. and I have one next button.
I need to get all these 10 rows edited values to the next page to store the edited values to the other variable ID's in the next page. what is the best way to use this type of situations
Thanks
Have your editable rows inside of a <form> in the first view
// BeginForm will render a <form> around the rowmodel HTML
using (Html.BeginForm('PostToMe', 'MyController')) {
foreach (RowModel row in Model) {
// HTML to render out a row
}
}
then send each row as an instance of a view model type with properties that match the data for each row
public class RowModel
{
// properties here
}
Finally post a collection of those types to the controller action. e.g.
public class MyController : Controller
{
[HttpPost]
public ActionResult PostToMe(IList<RowModel> rows)
{
// do something with rows
}
}
In ASP.NET MVC there is no notion of Page. There are controllers, actions and views. So probably what you are talking about is how to have a view send information to a controller action. Well there are couple of ways. One consist in generating an HTML <form> in this view, filling it with input elements and pointing this form action attribute to the target action:
<% using (Html.BeginForm("TargetAction", "SomeController")) { %>
... some input fields, maybe in a grid, whatever
<input type="submit" value="GO" />
<% } %>
If you want to select a particular row in the grid then you could generate a form on each row in this grid and use the item id as hidden field.
Scenario:
platform: ASP.NET 4.0, MVC 2.0 (doesn't have to be MVC if it's not the right solution)
Create various widgets that inherit the same core markup:
<div class="widget">
<div class="hd-widget">
<!-- dynamically inject code here for each actual widget -->
</div>
<div class="bd-widget">
<!-- dynamically inject code here for each actual widget -->
</div>
<div class="ft-widget">
<!-- dynamically inject code here for each actual widget -->
</div>
</div>
The above "simplified" example should be in some reusable control or masterpage.
The flow is something like this:
Controller -> View -> Partial View (1..n) -> widget markup
User instantiates an action which calls a controller. The controller tries to render a view that contains content + multiple widgets (left rail, right rail, etc). The Widgets all have their own individual partial views but each partial view should inherit or consume a base set of widget markup and have controller areas where to embed functionality.
Functionality in the head, body, and footer can either be plain text, HTML, or additional custom controls.
What is the best recommended approach?
I would be thinking you would have a WidgetModel which contains a set of properties regarding the widget.
Eg.
public class WidgetModel
{
public string ControllerName { get; set; }
public string HeaderAction { get; set; }
public string BodyAction { get; set; }
public string FooterAction { get; set; }
}
And you have a Widget View like
<div class="widget">
<div class="hd-widget">
<%: Html.RenderAction(Model.HeaderAction, Model.ControllerName) %>
</div>
<div class="bd-widget">
<%: Html.RenderAction(Model.BodyAction, Model.ControllerName) %>
</div>
<div class="ft-widget">
<%: Html.RenderAction(Model.FooterAction, Model.ControllerName) %>
</div>
</div>
Of course you could add more to it if you wanted.
I assume that your widgets will be stored in a DB.
I guess you'll need tables for Paths, PageSettings, Widgets, WidgetInstances, MasterPages, MasterPageZones and Zones.
I think that each widget will need to make a call in to RenderAction and this action will be stored in the DB against the widget. The widget header and footer can probably just be retrieved from the DB.
When I did this I spent quite a bit of time creating the dynamic editor for each of the widgets, the state of each widget is serialized in json, the only issue I'm still working on is dynamic validation of the widget editor.
Page Layouts are handled by a custom personalization class, storing the masterpage, path, userId etc.
It's quite an involved solution using JQuery sortable but really quick and SEO friendly.
How do I display hierarical data in ASP.NET? I have a data source that looks like this:
class Tree
{
IEnumerable<Node> Nodes { get; set; }
}
class Node
{
string Description { get; set; }
decimal Amount { get; set; }
IEnumerable<Node> SubNodes { get; set; }
}
I would like to render is as a list of divs, like the one below. I need the div tags to make the animations smooth when expanding and collapsing the branches.
<ul class="foldable">
<li>
<div class="line">
<div class="description">...</div>
<div class="amount">...</div>
</div>
<div class="line">
<div class="description">...</div>
<div class="amount">...</div>
</div>
<ul>
<li>
<div class="line">
<div class="description">...</div>
<div class="amount">...</div>
</div>
</li>
</ul>
</li>
</ul>
I tried building this using ListView elements, but I could not figure out how to call it recursively.
I also looked at the TreeView class, but dropped it because it is rendered using tables.
I gave up on the CSS Friendly Control Adaptors since this seems to be an either or switch for all the controls on the web site.
I tried with a BulledList, but could not figure out how to make it render the divs.
I ended up using four identical nested ListView elements since I know that my lists are never deeper than four levels. But this solution is just so ugly that I'm hoping to find a better one here. =)
You could use a repeater control and then cycle through your list and for each node that has children nest another repeater. It would take some effort because your would need to use it programmatically, but having a prebuilt Repeater control as a server control would make it quite a bit easier.
I like using repeaters because they're VERY flexible when you take some time and work with them. That, and they don't put in extraneous HTML. :)