In the following example,
<uc1:MyUserControl>
<p>this is html</p>
</uc1:MyUserControl>
How do I access "<p>this is html</p>" as a string within MyUserControl so that I might inject it into the response?
I'm not talking about passing in a string parameter like <uc1:MyUserControl myparameter="<p>this is html</p>" />, but how do I access true multi-lined intellisensed HTML markup either between the opening and closing tags or by some other mechanism such as a <MessageTemplate> tag.
Bonus points for a solution that works in ASP.NET MVC 3!
EDIT:
Thanks to StriplingWarrior and this link as the missing puzzle piece, magic was made:
So, in any view:
<%# Register src="../../Shared/Ribbon.ascx" tagname="Ribbon" tagprefix="uc1" %>
...
<uc1:Ribbon ID="Ribbon" runat="server">
<Content>
Hello world! I am <b>pure html</b> being passed into a UserControl!
</Content>
</uc1:Ribbon>
In Ribbon.ascx:
<%# Control Language="C#" CodeBehind="Ribbon.ascx.cs" Inherits="NunYourBeezwax.Views.Shared.Ribbon" %>
<table>
<tr>
<td>I am reusable stuff that wraps around dynamic content</td>
<td><%= this.Content %></td>
<td>And I am stuff too</td>
</tr>
</table>
And finally, in Ribbon.ascx.cs (Need to manually add in MVC)
using System.Web.Mvc;
using System.Web.UI;
namespace NunYourBeezwax.Views.Shared
{
[ParseChildren(true, "Content")]
public class Ribbon : ViewUserControl
{
[PersistenceMode(PersistenceMode.EncodedInnerDefaultProperty)]
public string Content { get; set; }
}
}
Will Render as:
<table>
<tr>
<td>I am reusable stuff that wraps around dynamic content</td>
<td>Hello world! I am <p>pure html<p> being passed into a UserControl!</td>
<td>And I am stuff too</td>
</tr>
</table>
In typical WebForms controls, the HTML will be automatically put into a Literal control in MyUserControl's Controls collection. Controls with template properties work a little differently, but you may still be able to access this in a similar way through the property whose name you're using (e.g. MessageTemplate).
MVC works totally differently, and I don't know if there's a way to do what you're asking there. You may want to consider using javascript to analyze what actually gets rendered client-side if it doesn't work for you.
Related
I am relatively new to this. I am working on this ASP.NET Core MVC project where I want to load a PartialView, HistoryTable.cshtml in a <div> in the current Main View when the Main View, Locate.cshtml loads. In other words, I want the PartialView to be there whenever the MainView loads/reloads.
I am implementing it in the following way:
Locate.cshtml
#model Project.Models.CustomModels.LocationsHistoryViewModel
<div class="container">
...
<div id="divLocationsHistoryTable"></div>
...
</div>
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$(".disabledropdowncntrl").prop('disabled', false).trigger("chosen:updated");
$("#divLocationsHistoryTable").load("/Project/HistoryTable");
});
HistoryTable.cshtml
#model IEnumerable<Project.Models.CustomModels.LocationsHistoryViewModel>
<div class="card">
...
#if(Model.Count() != 0)
{
<thead>
<tr>
<th data-column-id="UserId" data-type="string" data-identifier="true" hidden>User ID</th>
<th data-column-id="Name">Name</th>
...
</tr>
</thead>
}
else
{
...
}
<tbody>
#foreach(var item in Model)
{
<tr>
<td>
#item.User.FirstName #item.User.LastName
</td>
...
</tr>
}
</tbody>
</div>
Controller: Locate ActionMethod
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Locate(int Id, InventoryLocationsHistoryViewModel locationsHistoryVM)
{
...
var HistoryObject = _context.History
.Include(...
.Where(...
.Select(...
{
...
}).ToList();
return PartialView("/Project/HistoryTable", HistoryObject);
}
What to do?
EDIT
The issue that I am facing is similar to this question, however, the difference is that I HAVE to use Submit button here as I am submitting form here. The Submit button has to do two things when clicked:
Save the form details into the database.
Update the HistoryTable that has to be displayed below the Submit button always. This HistoryTable has to be shown at all times (even before clicking Submit). Thus, I cannot use Button.
There's a number of issues here, making it a little difficult to figure out what it is you're actually trying to achieve.
First and foremost, your Locate action should return your Locate.cshtml view, on both GET and POST. The fact that that view includes your HistoryTable.cshtml partial view is an implementation detail. If you only return the partial on POST, you'll only have the partial HTML in the browser, not the full Locate view.
Then, it appears that you're attempting to use jQuery's load method to load your actual partial, not an action that returns that partial. You can't get the view directly; you need to submit an AJAX request (what load is doing) to a route tied to an action that returns that partial.
Next, it looks like your partial needs a payload, i.e. some object needs to be "posted" for it to work with. If that's the case, you need to pass a JavaScript object representation of what you need to post to the load method as its second parameter. As it is, it's simply going to issue a GET request directly, passing no data.
However, since you're only doing this on page load, it calls into question why you're using AJAX at all. AJAX only makes sense if you need to change something later, after page load. If you're doing an AJAX request on load, it should simply be built into the page from the start, negating the need for a separate request.
Lastly, while you can pass a model to a partial view when you include it in a page, more likely than not what you're actually looking for here is a view component, i.e. something capable of actually doing logic like querying from a database, separate from the main request in play.
Virtually every ASP app I've written (hundreds) follows the exact same pattern. A "single page app" with a header and footer, and a dynamically updated content area that changes depending upon what going on/in the url. Something like the following (very simplified, but demonstrates the principle):
<% select case lcase(request("action") %>
<% case "home" %>
<div class='class_home'>
Home Screen HTML/Script/ASP
</div>
<% case "enroll" %>
<div class='class_enroll'>
Enroll Screen HTML/Script/ASP
</div>
<% case "checkout" %>
<div class='class_checkout'>
<!-- if it's gonna be lengthy, will often do this instead: -->
<!--
#include file=checkout.inc.asp
-->
</div>
<% end select %>
This pattern may even be nested several layers deep with additional request("subaction") subarea/subforms involved. Every form submits to itself ([form action="" method=POST]), and asp script at the top catches the form and processes it, then continues.
So, the question is, is this pattern still done inside MVC? Or do I have to duplicate the common areas over and over again in each separate page that I create?
Is this even a good idea to WANT to do this? Or is there a better way to accomplish the same goal of a "single page app"?
Thanks!
Even in classic ASP you could achieve this without all the craziness that is going on in that select statement.
In MVC, you use partials and layout pages to avoid repeating code. Here is a nice rundown http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
This is still the same in MVC. If you are using Razor, look for the _Layout.cshtml file in /Views/Shared. If you are using the old ASP.Net engine, it will in the same location but called MasterPage.
Aditionally, there is a file called _ViewStart.cshtml. This is invoked automatically by the framework, and this is what points to the _Layout.cshtml file.
I'll add a little more to the suggestions of using _ViewStart.cshtml and _Layout.cshtml. Make sure to use strongly typed view for all your Views and have each View Model extend from a base View Model class that has all the "common" data such as the menu state, logged in status, etc.
You would just do this using ineritance:
public class MyBaseViewModel
{
public string UserName { get; set; }
//other properties
}
public class MySampleViewModel : MyBaseViewModel
{
//additional properties for this View only
}
The situation is as follows:
I have a ViewModel that has a property that's a List<Product>, where Product is a class with let's say properties Property1, Property2 and Property3.
I have to render the ViewModel and I wish to render the List<Product> in an HTML table each row of which has a "Delete" button for that row.
Underneath the afore-mentioned HTML table, there should be 2 buttons:
3.1 "Add" - used to add a new empty Product to the list
3.2 "Use default product list" - the List has to be loaded via an AJAX call to the GetDefaultProduct() action of the controller
Clicking on a "Delete", "Add" or "Use default product list" button should not post the entire page
The model contains some other lists of items as well - for the sake of example: List<Sales>, List<Orders> and so on. I'm hoping I can re-use the solution for the List for those lists as well.
Is there a way to do this with ASP.NET MVC?
If yes, what is the best way to do it with ASP.NET MVC?
I did this with jQuery templating and I managed to implement this with simple operations, but I have to do it in an ASP MVC solution and I'm still trying to get the hang of the technology.
I've been reading about the Editor template, RenderAction, Async action and partial views and I'm trying to compose a solution with them and I'll post it if it works.
Thanks in advance for any suggestions and comments!
UPDATE
The solution lies (as Darin pointed out) in Steve Sanderson's blog post.
However, it assumes that the reader is aware of under-the-covers way of how a List of objects should be rendered in a CRUD-friendly, indexed manner.
So, in order to help anyone who wants to have an indexed list of omplex objects, I suggest reading mr. Haacked's blog post: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx.
After you are done with it, you can move on to Sanderson's blog. By the way, take a good look at the BeginCollectionItem custom HTML helper - its implementation isn't a trivial one as one might think.
The demo project is a sight for sore eyes - it's spot on and easy to understand.
The proposed solution DOES use some jQuery.ajax() calls (for the Add link), but just out of bare necessity.
PS: It's a bit frustrating that one has to read an explicit article from one of the developers of ASP.NET in order to find out that there's an implicit CoC (Convention-over-Configuration) in the default model binder - it just knows how to work with Lists, but no out-of-the-box HTML helper (or anything similar) doesn't let you in on this.
Personally I think that CRUD-friendly rendering of List<object> is a very common scenario, not an edge case so it should be simpler to use and a part of the ASP.NET MVC out-of-the-box machinery.
I would recommend you reading the following blog post. It would definitely put you on the right track for implementing an editing scenario of a variable length list.
This is a very easy way of doing it if you want to do using Jquery.
ASP.Net MVC 3 JQGrid
Save yourself some pain and download the Telerik Extensions for ASP.Net MVC. It's open source ( though there's a paid option).
The Grid control (possibly in conjunction with the Window control) will give you all the UI functionality you need and there's plenty of online examples.
I've been doing a lot of master-detail UI work recently and Telerik's been an immense help.
Maybe this is not the answer you are looking for, but hey, try to create a default typed edit view for a model using folowing settings:
this will generate the folowing code for view (assuming Razor engine):
#model IEnumerable<MvcApplication2.Models.User>
#{
View.Title = "GetData";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>GetData</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th></th>
<th>
Name
</th>
<th>
Description
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
<td>
#item.Name
</td>
<td>
#item.Description
</td>
</tr>
}
</table>
The code wich will handle edit/update/details will accept Id of the entity as a parameter. These are paricualr other methods of your controller which will handle editting/adding/previewing of you item
I have a lot of content-heavy views in my ASP.NET MVC 2 site. These contain several re-occurring HTML patterns. When using ASP.NET Webforms, a class derived from WebControl could encapsulate these patterns. I'd like some pointers on the correct approach for this problem with MVC.
Detailed Explanation
Patterns not unlike the following HTML markup keep occurring throughout these views. The markup renders into an isolated a box of content:
<div class="top container">
<div class="header">
<p>The title</p>
<em>(and a small note)</em>
</div>
<div class="simpleBox rounded">
<p>This is content.</p>
<p><strong>Some more content</strong></p>
</div>
</div>
This is a trivial example, but there are more complex recurring patterns. In ASP.NET Webforms I would have abstracted such code into a WebControl (let's say I'd have named it BoxControl), being included on a page like this:
<foo:BoxControl runat="server">
<Header>The title</Header>
<Note>(and a small note)</Note>
<Content>
<p>This is content.</p>
<p><strong>Some more content</strong></p>
</Content>
</foo:BoxControl>
This abstraction makes it easy to adapt the way the box is constructed throughout the site, by just altering the BoxControl source. It also keeps the static HTML content neatly together in the View Page, even when combining several BoxControls on a page. Another benefit is that the HTML used as content is recognized by the IDE, thus providing syntax highlighting/checking.
To my understanding, WebControls are discouraged in ASP.NET MVC. Instead of a WebControl, I could accomplish the abstraction with a partial view. Such a view would then be included in a View Page as follows:
<%= Html.Partial("BoxControl", new {
Header="The Title",
Note="(and a small note)",
Content="<p>This is content.</p><p><strong>Some more content</strong></p>"});
%>
This is not ideal, since the 'Content' parameter could become very long, and the IDE does not treat it as HTML when passed this way.
Considered Solutions
Strongly-Typed ViewModels can be passed to the Html.Partial call instead of the lengthy parameters shown above. But then I'd have to pull the content in from somewhere else (a CMS, or Resource file). I'd like for the content to be contained in the View Page.
I have also considered the solution proposed by Jeffrey Palermo, but that would mean lots of extra files scattered around the project. I'd like the textual content of any view to be restricted to one file only.
Should I not want to abstract the markup away? Or is there maybe an approach, suitable for MVC, that I am overlooking here? What is the drawback to 'sinning' by using a WebControl?
There is a solution to this problem, although the way to get there is a little more clutsy than other frameworks like Ruby on Rails.
I've used this method to create markup for Twitter Bootstrap's control group syntax which looks like this:
<div class="control-group">
<label class="control-label">[Label text here]</label>
<div class="controls">
[Arbitrary markup here]
</div>
</div>
Here's how:
1) Create a model for the common markup snippet. The model should write markup on construction and again on dispose:
using System;
using System.Web.Mvc;
namespace My.Name.Space
{
public class ControlGroup : IDisposable
{
private readonly ViewContext m_viewContext;
private readonly TagBuilder m_controlGroup;
private readonly TagBuilder m_controlsDiv;
public ControlGroup(ViewContext viewContext, string labelText)
{
m_viewContext = viewContext;
/*
* <div class="control-group">
* <label class="control-label">Label</label>
* <div class="controls">
* input(s)
* </div>
* </div>
*/
m_controlGroup = new TagBuilder("div");
m_controlGroup.AddCssClass("control-group");
m_viewContext.Writer.Write(m_controlGroup.ToString(TagRenderMode.StartTag));
if (labelText != null)
{
var label = new TagBuilder("label");
label.AddCssClass("control-label");
label.InnerHtml = labelText;
m_viewContext.Writer.Write(label.ToString());
}
m_controlsDiv = new TagBuilder("div");
m_controlsDiv.AddCssClass("controls");
m_viewContext.Writer.Write(m_controlsDiv.ToString(TagRenderMode.StartTag));
}
public void Dispose()
{
m_viewContext.Writer.Write(m_controlsDiv.ToString(TagRenderMode.EndTag));
m_viewContext.Writer.Write(m_controlGroup.ToString(TagRenderMode.EndTag));
}
}
}
2) Create a nifty Html helper
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using My.Name.Space
namespace Some.Name.Space
{
public static class FormsHelper
{
public static ControlGroup ControlGroup(this HtmlHelper helper, string labelText)
{
return new ControlGroup(helper.ViewContext, labelText);
}
}
}
3) Use it in the view (Razor code)
#using (Html.ControlGroup("My label"))
{
<input type="text" />
<p>Arbitrary markup</p>
<input type="text" name="moreInputFields" />
}
This is also the way MVC framework renders a form with the Html.BeginForm method
Well you wouldn't render the partial like that, pass it a strongly-typed ViewModel, like this:
<%= Html.RenderPartial("BoxControl", contentModel) %>
contentModel is the ViewModel (just a POCO-like storage mechanism for your views), which the strongly typed partial view would bind to.
So you can do this in your partial view:
<h1><%: Model.Header %></h1>
<p><%: Model.Content %></p>
etc etc
After considering the answers and running an experiment, I'm inclined to adhere to the pure MVC approach and duplicate some presentation code throughout View Pages. I'd like to elaborate on the rationale for that decision.
Partial View
When using a Partial View, The content for the box needs to be passed as a View Model, making the View Page less readable versus declaring the content HTML on the spot. Remember that the content does not come from a CMS, so that would mean filling the View Model with HTML in a controller or setting a local variable in the View Page. Both of these methods fail to take advantage of IDE features for dealing with HTML.
WebControl
On the other hand, a WebControl-derived class is discouraged and also turns out to have some practical issues. The main issue that the declarative, hierarchical style of traditional ASP.NET .aspx pages just does not fit the procedural style of MVC.NET View Pages. You have to choose for either a full blown traditional approach, or go completely MVC.
To illustrate this, the most prominent issue in my experimental implementation was one of variable scope: when iterating a list of products, the MVC-way is to use a foreach loop, but that introduces a local variable which will not be available in the scope of the WebControl. The traditional ASP.NET approach would be to use a Repeater instead of the foreach. It seems to be a slippery slope to use any traditional ASP.NET controls at all, because I suspect you'll soon find yourself needing to combine more and more of them to get the job done.
Plain HTML
Forgoing the abstraction at all, you are left with duplicate presentation code. This is against DRY, but produces very readable code.
It doesnt look like webforms has that much less html to me, it seems more like a lateral move. Using a partial in MVC can make it cleaner but the html markup you needed will still be there, in one place or another. If its mostly the extra html that bothers you, you might take a look at the NHaml view engine or check out haml
the haml website.
I'm by no means a Haml expert but the html does look a lot cleaner...
.top container
.header
%p
The title
%em
(and a small note)
.simpleBox rounded
%p
This is content.
%p
Some more content
Is there an out-of-the-box way to create unique "id" tags in ASP.NET MVC?
(Similar to the dreaded but sometimes useful ClientIDs in WebForms?)
This would be useful when rendering a partial view many times on a page.
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%-- Example Partial View --%>
<div id="<%=GenerateAUniqueIDHere()%>">
Content
</div>
<script type="text/javascript">
$("#<%=GenerateAUniqueIDHere%>").hide().fadein().css("font-size", "500%");
</script>
If not, it is easy enough to roll my own.
Thanks much,
Jon
Use a GUID?
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%-- Example Partial View --%>
<%
string ID = Guid.NewGuid().ToString();
%>
<div id="<%=ID%>">
Content
</div>
<script type="text/javascript">
$("#<%=ID%>").hide().fadein().css("font-size", "500%");
</script>
I would also pass the GUID in as a viewdata object during the renderpartial method call to keep your ViewUserControl tidy
As far as I know, MVC does not have this. I have used ASP.NET MVC for over a year, and never had to use this. When I have several controls, with the same name, I almost always want to be able to query these controls later, so I need to know the Id, and use a counter, so I know the names. If you don't need to know their ids, why even give them a id?
From MSDN:
The chance that the value of the new Guid will be all zeros or equal
to any other Guid is very low.
So there seems to be no way to make sure that an ID is absolutely unique. Using Guid seems to be a better solution than generating a random number on your own.
You could try generating the ID from the data or its description.