How to handle dynamically generated form submit in asp.net mvc?
Form is dynamically created (number, order and type of elements are always different) and i have to handle it (store the data in the database) in the Controller of asp.net mvc (there is no viewstate). Type of input can be everything; hidden fields, radio buttons, check boxes, text inputs etc..
<% using (Html.BeginForm("AddAnswer","Research")){ %>
<%= Html.Hidden("page", ViewData["curentPage"]) %>
<% foreach (var item in Model){ %>
<span><%= Html.Encode(item.Text) %></span>
<%= Html.ActionLink("Edit", "Edit", new {id=item.QuestionID}) %>
|
<%= Html.ActionLink("Details", "Details", new { id=item.QuestionID })%>
<%switch (item.QuestionTipe.QuestionTipeID){
case 4:%>
<table>
<%foreach (var offeredAnswer in item.OfferedAnswer) {%>
<tr>
<td><%= Html.CheckBox("q" + item.QuestionID, false, new{ value = offeredAnswer.Number})%></td>
<td><%= offeredAnswer.Text%></td>
</tr>
<%}%>
</table>
<% break;
case 1:%>
<table>
<% foreach (var offeredAnswer in item.OfferedAnswer) {%>
<tr>
<td><%= Html.RadioButton("q" + item.QuestionID, false, new{ value = offeredAnswer.Number})%></td>
<td><%= offeredAnswer.Text%></td>
</tr>
<%}%>
</table>
<% break;
case 2:%>
<div style="width:220px; height:20px; padding-top:10px; padding-left:8px;">
<%= Html.TextBox("q" + item.QuestionID, null, new { style = "width:200px;"})%>
</div>
<% break;
case 3:%>
<div style="width:220px;height:20px; padding-top:10px;padding-left:8px;">
<div id="q<%= item.QuestionID %>" style="width:200px;" class="slider">
</div>
<%= Html.Hidden("q" + item.QuestionID, 0)%>
</div>
<% break;
}%>
<%}%>
<p>
<input type="submit" value="Sljedeća strana" />
</p>
<%}%>
In your action method, you can access FormCollection parameter, from there, you can access all your passed in values from your submit action.
public ActionResult YourActionMethod(FormCollection form)
{
}
In order to best help you decide how to process the form, it may be helpful to have some additional information.
Something is making the decision to generate this form, what is doing that? What is it basing its rendering on?
Are there known variations of the form that can be accounted for, or are the elements truly independent of each other?
Are each of the elements themselves known? If so, is it possible to give them a consistent id/name so that they may be recognized on the server-side?
When you speak of "handling" the submission, what is the end goal that you'd like to achieve? For example, are you parsing the form to store in a database?
foreach (var key in form.AllKeys) {
var answers = form.GetValues(key);
if (answers.Count() > 1){
foreach (var value in answers)
{
...
}
}
else
{
...
}
}
This is very simple. I'm checking if there is multiple values for some of the answers in the form.
Related
I am staring at the worst mess, my monitor isn't tall enough to see what is going on, and VS 2010 is no help at all.
I do not have any idea how to refactor this trash.
It's 11 AM and I feel like pouring a drink already.
Is this just the final proof that I have no business coding? Be honest.
<div id="followedFriends">
<% if (Model.FollowedFriends.Count() > 0)
{
foreach (var friend in Model.FollowedFriends)
{ %>
<div id="friendContainer">
<div class="followedFriend">
<div class="userName">
<%= Html.ActionLink(friend.FoFriend.UserName, "Visitor", "Home", new {userID = friend.FoFriend.UserId}, null)%></div>
Currently reading:
<br />
<div class="bookLinks">
<% if (friend.BookCount != 0)
{ %>
<% if (friend.BookCount <= 5)
{ %>
<%= friend.BookLinks%>
<%}
else
{ %>
<%:Html.ActionLink(friend.BookCount + " different books.", "Visitor", "Home", new {userID = friend.FoFriend.UserId}, null)%>
<%}
}
else
{ %>
Nothing, it appears...
<%}%>
</div>
<%if (friend.ReviewCount != 0)
{%>
New review for:
<div class="reviewLinks">
<%if (friend.ReviewCount <= 5)
{ %>
<%= friend.ReviewLinks%>
<%}
else
{%>
<%: friend.ReviewCount %>
different books
<%}%></div>
<%}
if (friend.QuoteCount != 0)
{%>
<span class="highlight">▸</span>
<%: friend.QuoteCount%>
new
<%if (friend.QuoteCount != 1)
{ %>quotes
<%}
else
{ %>
quote
<%} %>
<%}%>
</div>
</div>
<%}
}%>
</div>
<%} %>
Update
Since someone was asking, here is the pertinent portion of the View Model:
public class FollowedFriend
{
public aspnet_User FoFriend { get; set; }
public string BookLinks { get; set; }
public int BookCount { get; set; }
public string ReviewLinks { get; set; }
public int ReviewCount { get; set; }
public int QuoteCount { get; set; }
public FollowedFriend(Guid userID, DateTime lastVisit)
{
using (var context = new BookNotesEntities())
{
FoFriend = context.aspnet_Users.SingleOrDefault(u => u.UserId == userID);
var reading = context.Books.Where(b => b.UserID == userID && b.CurrentlyReading == true).ToList();
BookCount = reading.Count;
if (BookCount <= 5)
BookLinks = Book.ConvertBooksToLinks("Book/Details", reading);
else
BookLinks = "";
var recentBooks = context.Books.Where(b => b.UserID == userID
&& b.Review.DateCreated >= lastVisit).OrderByDescending(b => b.DateCreated).ToList();
if (recentBooks.Count <= 5)
ReviewLinks = Book.ConvertBooksToLinks("/Book/Details", recentBooks);
else
ReviewLinks = "";
ReviewCount = recentBooks.Count;
QuoteCount = context.Quotes.Count(q => q.UserID == userID && q.DateCreated >= lastVisit);
}
}
}
Let's start with a maxim that was initially proposed by Rob Conery: if there's an embedded "if" somewhere in your View, it's probably an indicator that you should either A.) create an HtmlHelper or B.) retract the logic from the view and insert it into your ViewModel.
By doing so, you can clean up your View to look something like this (you get the idea):
<div id="followedFriends">
<% foreach (var friend in Model.FollowedFriends) { %>
<div id="friendContainer">
<div class="followedFriend">
<div class="userName">
<%: Html.ActionLink(friend.FoFriend.UserName, "Visitor", "Home", new {userID = friend.FoFriend.UserId}, null)%>
</div>
Currently reading:
<br />
<div class="bookLinks">
<%: Html.DisplayBooklinks(friend) %>
</div>
<div class="bookReviews">
<%: Html.DisplayBookReviews(friend) %>
</div>
<div class="bookQuotes">
<%: Html.DisplayQuotes(friend) %>
</div>
</div>
</div>
<% } %>
</div>
At this point, if there's any chance that this piece of UI might be consumed in some other page, you should consider throwing it into a user control. By doing so, your view could now look something like this:
<% Html.RenderPartial("FriendDetails", Model.FollowedFriends); %>
Ultimately, whenever your View starts to look like soup, it's because your view is doing too much thinking. Which, in turn, means: some other layer of your application isn't thinking enough. By pinpointing logic in your Views, and by determining what abstractions might aid you in your attempt to remain DRY, your Views will become much more readable and much more maintainable.
I would factor some of that inline logic to an HtmlHelperExtension method and then create a DisplayTemplate "Friend"
<div id="followedFriends">
<% if (Model.FollowedFriends.Any()) {
foreach (var friend in Model.FollowedFriends) {
<%=Html.DisplayFor(friend) %>
<% } %>
<% } %>
</div>
And your DisplayTemplate "Friend" would look something like this:
<div id="friendContainer">
<div class="followedFriend">
<div class="userName">
<%= Html.ActionLink(friend.FoFriend.UserName, "Visitor", "Home", new {userID = friend.FoFriend.UserId}, null)%></div>
Currently reading:
<br />
<%=Html.BookInformation(friend) %>
<%=Html.BookReview(friend) %>
<%=Html.Quotes(friend) %>
</div>
</div>
</div>
Rather than making HtmlHelperExtensions you could just create more DisplayTemplates and specifically call them: DisplayFor("BookReview", friend)
Let me start by saying, we've all been there...
For your particular problem, I'd consider a few of the following "tools":
Partial Views: when you have a lot of nested <div> tags, for instance, you may want to consider creating some partial views where appropriate.
Use the Controller for Business Logic: Some of your logic should be done in the controller, where it's easier to break things up and call different helper methods to apply the logic. Consider passing to your view a custom object (a ViewModel if you will) that has all the business logic parsed. For example, things like displaying "quote" vs "quotes" could be done in a ViewModel object's "DisplayValue"-type property.
HTML Helpers: These little extensions can help take care of extracting the many if/else statements that you have into an easily readable method - and they could be re-used on other pages if written generally enough.
Lastly, I'd say, go get some fresh air and come back with only one thing in mind: simplify! Often we get caught up with a long list of tasks that need to be done and we get lost in our own soup or spaghetti or what-have-you. You'll need to approach the code with only refactoring in mind, until it's clean enough that you can tell where the next piece of logic should go.
I'm new to ASP.Net MVC, so I try to find coding conventions for me, too:
write <% %> tags in a separate line (except for <%: and <%=)
eliminate sequences of %><% (except for <%: and <%=)
keep C# and HTML indentation separate
indent <%= and <%: as if they where HTML tags (if they do represent HTML tag/s)
I'm not a ASP expert, but like in PHP isn't there a way to echo things? In place of using so much open and close tags? I should place everything above the code, and make variables that you use in your HTML?
In my opinion, this isn't awful. I think the key here would be to try to spend some time walking through it and commenting where blocks start and then their corresponding end tags. It'll be painful now, but it'll save you some time later on.
I'm assuming you're looking for a code review. In that case:
remove the empty ELSE block with the comment "nothing, it appears"
Combine the nested IF conditions into a single check IF( count != 0 && count < 5 )
I am trying to create a "simple" timesheet application that is almost doing what I need it to do, I'm not sure it's the most efficient way of doing this, so please give me feedback if you have better ideas... I got help here at SO before (See Group items with Linq and display in table in MVC view where you can also see the database schema). Now I just need to be able to group at one more nested level.
What I get now is a sort of table layout looking sort of like this:
Project Task 1 2 3 (dates with hours in the cells)
ProjA Analysis 8 8 8
ProjB Analysis 8 7 8
(Etc)
Here's the property in the viewmodel that I use to populate the table(s):
public IEnumerable<IGrouping<Project, TimeSegment>> TimeSegmentsByProject
{
get
{
var projectGroups = from timeSegment in ts.TimeSegments
group timeSegment by timeSegment.Project
into projectGroup
select projectGroup;
return projectGroups.ToList();
}
}
And here's the code in the View:
<table>
<tr>
<th>
Projekt
</th>
<th>
Aktivitet
</th>
<th>
Timmar
</th>
</tr>
<% foreach (var item in Model.TimeSegmentsByProject)
{ %>
<tr>
<td>
<%:item.Key.Name %>
</td>
<td>
<table>
<% foreach (var i in item)
{ %>
<tr>
<td>
<%: i.Task.Name %>
</td>
</tr>
<% } %>
</table>
</td>
<td>
<table>
<% foreach (var i in item)
{ %>
<tr>
<% for (int index = 0; index < 30; index++)
{%>
<td width="20px">
<%if (i.Date.Substring(8) == index.ToString())
{ %>
<%: i.Hours %>
<% } %>
</td>
<% } %>
</tr>
<% } %>
</table>
</td>
</tr>
<% } %>
</table>
Now, the problem is that this works fine, but even though Project is grouped and only appears once for each project, task is repeated with a new row for the same task name. I want each task only once, just like for Project. But the linq group expressions and all that has already got me so confused so I have no idea how to get this done. I'm in a bit over my head here, I thought a timesheet application would'nt be such a hard thing (at least a basic one). But I'm fairly close to something that would do, if I could just get this task grouping to work so I don't get it repeated.
Any advice for how to change my code to do this would be appreciated! (And if you think I'm doing it wrong, please tell me how)
Here's a stab at it.
var projectGroups =
from timeSegment in ts.TimeSegments
group timeSegment by new //start off by grouping two properties
{
ProjectName = timeSegment.Project.Name,
TaskName = timeSegment.Task.Name
} into g
select new
{
Key = g.Key,
Values = //and finish off by turning each group into another query.
(
from ts in g
group ts by ts.Date.Substring(8)) into g2
select new {
indexValue = g2.Key,
Hours = g2.Sum(ts2 => ts2.Hours)
}
).ToList()
};
Now, just because I used anonymous types here, doesn't mean you need to. You can declare actual classes and use them to project into. Just be careful with the class that serves as the grouping key (it has ProjectName and TaskName) as you don't want to use reference equality...
I'm studying ASP MVC, and developping SportsStore (Create/Edit feature). When Create a product, Create action will view a Edit view, but when press Sudmit, it call action Create (Post), althrough I will set it call Edit action:
<% using (Html.BeginForm("Edit", "Admin", FormMethod.Post, new { enctype="multipart/form-data" }))
{%>
<%--<%= Html.ValidationSummary() %>--%>
<%--<%= Html.Hidden("ProductID") %>--%>
<p>Name: <%= Html.TextBox("Name")%>
<div><%= Html.ValidationMessage("Name")%></div>
</p>
<p>Description: <%= Html.TextArea("Description", null, 4, 20, null)%>
<div><%= Html.ValidationMessage("Description")%></div>
</p>
<p>Price: <%= Html.TextBox("Price")%>
<div><%= Html.ValidationMessage("Price")%></div>
</p>
<p>Category: <%= Html.TextBox("Category")%>
<div><%= Html.ValidationMessage("Category")%></div>
</p>
<p>
Image:
<% if (Model.ImageData == null)
{ %>
None
<% }
else
{ %>
<img src= "<%= Url.Action("GetImage", "Products", new {Model.ProductID}) %>" />
<% } %>
<div>Upload new image: <input type="file" name="file" id="file" /></div>
</p>
<input type="submit" value="Save" />
<%= Html.ActionLink("Cancel and return to list", "Index")%>
<% } %>
Please help me fix it
The code you have seems reasonable if you want it to post back to the Edit action. Your question is a bit confusing, but I'm going to assume that you want to reuse the view and have it post back to Create when rendered from Create and Edit when rendered from Edit. The easiest way is to simply omit the parameters from the BeginForm call. This will cause the form action to be set to the current controller and action, which would give you what you seem to want. An alternative would be to develop templates (display/editor) for the model but have separate views for Create/Edit that simply render the template Html.EditorFor( m => m, "ProductTemplate" ). This would allow you to customize the view -- perhaps the Create view requires you to upload an image? -- yet still reuse most of the code.
I am building a .NET MVC app that has a page with a list of delete buttons, one for each item in a list. The problem I'm having is that the foreach variable "item" is not visible inside the LoginView, which results in the following error:
Compiler Error Message: CS0103: The name 'item' does not exist in the current context
Below is a simplified version of the view. The error occurs at the "new {id=item.Id}" in the LoggedInTemplate - the reference to "item" in the ActionLink works fine:
<% foreach (var item in Model) { %>
<%= Html.ActionLink("Item", "Details", new { id = item.Id })%>
<asp:LoginView runat="server">
<LoggedInTemplate>
<% using( Html.BeginForm( "Delete", "Items", new {id=item.Id}, FormMethod.Post))
{ %>
<input type="submit" value="Delete" runat="server" />
<% } %>
</LoggedInTemplate>
</asp:LoginView>
<% } %>
To clarify the problem is not that the Model has not been successfully passed to the View. The Model is visible from both inside and outside the LoginView. The foreach loop as no problem in iterating through the items in the Model (which is a List). The problem is that the iteration variable "item" is not accessible from within the LoginView - though the original Model is.
Is there any way to pass "item" through to the LoginView's templates? Or is building LoginViews within a foreach loops the wrong way of doing things?
Is there a scoping rule that prevents using local variables within controls - perhaps because the control is rendered at a different time to the main page?
With ASP.NET MVC you really shouldn't use user/custom controls, so if you omit the <asp:LoginView/> and write a line of code to check if the user is authenticated, you are good to go.
Instead of your current code:
<asp:LoginView runat="server">
<LoggedInTemplate>
<div>Show this to authenticated users only</div>
</LoggedInTemplate>
</asp:LoginView>
Just use an if-statement and the value of Request.IsAuthenticated:
<% if (Request.IsAuthenticated) { %>
<div>Show this to authenticated users only</div>
<% } %>
Are you passing the Model to the view and are you also inheriting from the model within that view?
So if this is a View then in your C# code you need to return the list of items like return View(listofitems);
If this is a partial view then <% Html.RenderPartial("MyPartial", listofitems) %>
And in the view you need to
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IQueryable<ListOfItems>>" %>
If all that is in place then it should work no probs.
<% foreach (var item in Model) { %>
<%= Html.ActionLink("Item", "Details", new { id = item.Id })%>
<%= if( Request.IsAuthenticated ) {
using( Html.BeginForm( "Delete", "Items", new {id=item.Id}, FormMethod.Post))
{ %>
<input type="submit" value="Delete" runat="server" />
}
} %>
<% } %>
There is no need to use the LoginView, its not really giving you anything. Use something like the above instead.
Alternatively, you can move the decision of whether to show the delete option for the specific item into the controller, so instead of doing if( Request.IsAuthenticated ) you would do if( item.ShowDelete ) ... assuming item's type is a view model. Another option is to use an extension method for the same, item.ShowDelete(). I prefer the earlier, because there might be logic associated to deciding whether to show delete for a given item, so its better to not have it in the controller or a related logic.
I have HTML table on the ASP.NET MVC View page. Now I have to export this table to Excel.
(1) I have used partial view (Inquiries.ascx) to display the table data from database (using LINQ to Entity)
(2) I also have used UITableFilter plugin to filter the records (Ex: http://gregweber.info/projects/demo/flavorzoom.html )
(3) At any point of time, I have to filter the visible records to Excel.
Appreciate your responses.
Thanks
Rita
Here is my View:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mvc.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server">
<script src="../../Scripts/jquery.tablesorter.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.uitablefilter.js" type="text/javascript"></script>
<script type="text/javascript">
//Load Partial View
$('#MyInquiries').load('/Home/Inquiries');
// To Apply Filter Expression using uiTableFilter plugin
$("#searchName").keyup(function() {
$.uiTableFilter($("#tblRefRequests"), this.value);
$("#tblRefRequests").tablesorter({ widthFixed: true, widgets: ['zebra'] });
});
//Export the HTML table contents to Excel
$('#export').click(function() {
//Code goes here
});
</script>
</asp:Content>
//Main Content
<asp:Content ID="Content1" ContentPlaceHolderID="cphContent" runat="server">
<h2 class="pageName">View All Inquiries</h2>
<input type="submit" value="Export to Excel" id="export" />
<div id='MyInquiries'></div>
</asp:Content>
Strongly Typed Partial view user control (Inquiries.ascx) to generate table:
<table>
<tr><td valign ="middle">Filter Expression: <%= Html.TextBox("searchName")%></td></tr>
</table>
<table id="tblRefRequests" >
<thead>
<tr>
<th>Tx_ID</th>
<th>TX Date</th>
<th>Name</th>
<th>Email Address </th>
<th>Products</th>
<th>Document Name</th>
</tr>
</thead>
<tbody>
<% foreach (var item in Model) { %>
<tr>
<td visible =false><%= item.RequestID %></td>
<td><%= String.Format("{0:d}", item.RequestDate) %></td>
<td><%= item.CustomerName %></td>
<td><%= Html.Encode(item.Email) %></td>
<td><%= item.ProductName %></td>
<td><%= Html.Encode(item.DocDescription)%></td>
</tr>
<% } %>
</tbody>
</table>
Here is my Controller code to load the Inquiries partial view:
[HttpGet]
public PartialViewResult Inquiries()
{
var model = from i in myEntity.Inquiries
where i.User_Id == 5
orderby i.TX_Id descending
select new {
RequestID = i.TX_Id,
CustomerName = i.CustomerMaster.FirstName,
RequestDate = i.RequestDate,
Email = i.CustomerMaster.MS_Id,
DocDescription = i.Document.Description,
ProductName = i.Product.Name
};
return PartialView(model);
}
Try the jQuery plugin: table2csv. Use the argument, delivery:'value', to return the csv as a string.
Here is an implementation:
Add a regular html input button and a .NET HiddenField to the page
Add an onclick event to that button called "Export"
Create a javascript function, Export, that stores the return value of table2CSV() into the hidden field, and posts back.
The server receives the hiddenfield post data (the csv as a string)
The server outputs the string to the browser as a csv file
.
// javascript
function Export()
{
$('#yourHiddenFieldId').val() = $('#yourTable').table2CSV({delivery:'value'});
__doPostBack('#yourExportBtnId', '');
}
// c#
if(Page.IsPostBack)
{
if(!String.IsNullOrEmpty(Request.Form[yourHiddenField.UniqueId]))
{
Response.Clear();
Response.ContentType = "text/csv";
Response.AddHeader("Content-Disposition", "attachment; filename=TheReport.csv");
Response.Flush();
Response.Write(Request.Form[yourHiddenField.UniqueID]);
Response.End();
}
}
download components:npm install table-to-excel
https://github.com/ecofe/tabletoexcel
var tableToExcel=new TableToExcel();
document.getElementById('button1').onclick=function(){
tableToExcel.render("table");
};
document.getElementById('button2').onclick=function(){
var arr=[
['LastName','Sales','Country','Quarter'],
['Smith','23','UK','Qtr 3'],
['Johnson','14808','USA','Qtr 4']
]
tableToExcel.render(arr,[{text:"create",bg:"#000",color:"#fff"},{text:"createcreate",bg:"#ddd",color:"#fff"}]);
};