MVC 3 Razor view renders different on hosting environment than locally - asp.net-mvc

I have created an MVC 3 view, just by adding a controller and scaffold it by usage of entity framework.
See below view:
<table>
<tr>
<th>
MetaType
</th>
<th>
Value
</th>
<th>
Page
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.MetaType)
</td>
<td>
#Html.DisplayFor(modelItem => item.Value)
</td>
<td>
#Html.DisplayFor(modelItem => item.Page.Title)
</td>
<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>
</tr>
}
</table>
When I open the view on my dev machine than the html produced is just as expected:
<table>
<tr>
<th>
MetaType
</th>
<th>
Value
</th>
<th>
Page
</th>
<th></th>
</tr>
<tr>
<td>
Keywords
</td>
<td>
bla, bla bla,
</td>
<td>
Home
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
On our hosting environment it's rendered with on almost every row an extra whiteline.
<table>
<tr>
<th>MetaType</th>
<th>Value</th>
<th>Page</th>
<th></th>
</tr>
<tr>
<td>Keywords</td>
<td>values, values, values.</td>
<td>Home</td>
<td>Edit | Delete</td>
</tr>
Anyone has an idea why there is a difference, and how to resolve this extra whitespace?
UPDATE
It seems like only this page is having this issue. Other pages just have a normal html layout as expected. I also have checked the data from the database, but can't find anything unusual or different than the other pages.
I have also tried to regenerate the file and upload it again, but also no luck. I'm a bit out of options on this issue.

When something different in a host comparing to your environment, it's usually one of the following issues:
Time and/or DateTime Format of server is different from your local machine
Global application culture and/or encoding is different
Databases (MS-SQL) has a different collisions
I suggest you to add the following node to both your local and host web.config, and check the result:
<configuration>
<system.web>
<globalization
requestEncoding="utf-8"
responseEncoding="utf-8" />
</system.web>
</configuration>

After a doing a republish of my application the issue has dissapeared. Haven't found what's causing it.

Related

How can I do ASP.NET MVC view scaffolding in Rider IDE?

Currently trying Rider (JetBrains IDE for .Net). I used to work on Visual Studio Enterprise for c# asp.net MVC projects, and i'd like to know if there's a way (on Rider) to do like the "Add -> view -> with create/delete/update/list" feature on Visual Studio?
Something which would generate CRUD views like that :
#model IEnumerable<Web.Models.Warrior>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Health)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Health)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
#Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
#Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</table>
PS : if there's a way to do it with controllers to... :D
But you still can...
You can use dotnet aspnet-codegenerator terminal tool. which is used for generating controllers and views with different options.
Install the tool globally.
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet aspnet-codegenerator controller -name MyNewController -m MyModel -dc MyDbContext -outDir Controllers/
You can vote\track this issue: https://youtrack.jetbrains.com/issue/RIDER-12363
This is called Scaffolding and is unfortunately not a feature in Rider. I couldn't tell you if it's a planned feature, but I hope so.
My only suggestion might be to open VS, scaffold, and then use Rider again to continue coding.

MVC Turn model text into clickable link

I have an MVC Razor view that pulls change log information from a database (a table which only I have access to, limiting security concerns).
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Description)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
</tr>
}
</table>
The description will contain values like New page available: http://localhost:0000/app/NewItem. What I'm trying to figure out is how to make that web address active.
I.e., turn New page available: http://localhost:0000/app/NewItem
into: New page available: http://localhost:0000/app/NewItem
and have the link properly rendered on the page. Is there a simple way to accomplish this, short of using regular expressions in the controller to pull that link out?

how to list long form on page with mvc bootstrap?

I mean form with many fields, MVC bootstrap nicely do a form for editing or creating new data vertically
but listing it's just very long horizontal spread.
Is there a way to generate a list vertically for instance?
so it is not necessary to scroll to the right to see the end?
I'm talking about this below section, what to do if I have those items a lot?
Sorry I'm new to MVC bootstrap so maybe it's basic question but is the a way to mock up pages in MVC to make it easier formatting on page?
thanks
<div class="panel panel-default">
<div class="panel-heading">
<strong>Address List</strong>
</div>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.City)
</th>
<th>
#Html.DisplayNameFor(model => model.Street)
</th>
<th>
#Html.DisplayNameFor(model => model.Phone)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
#Html.DisplayFor(modelItem => item.Street)
</td>
<td>
#Html.DisplayFor(modelItem => item.Phone)
</td>
</tr>
}
</table>
</div>
You just need a little html to do the layout. instead of using tables with lots of columns, i can think of a basic div method, as div by default will layout vertically.
<div>
#Html.DisplayNameFor(model => model.City)
#Html.DisplayFor(modelItem => item.City)
</div>
<div>
#Html.DisplayNameFor(model => model.Street)
#Html.DisplayFor(modelItem => item.Street)
</div>
<div>
#Html.DisplayNameFor(model => model.Phone)
#Html.DisplayFor(modelItem => item.Phone)
</div>

Paging in MVC 5

In MVC 5, how to create paging for table? The following is a table structure.
<table class="table">
<tr>
<th>
Item ID
</th>
<th>
Item Name
</th>
<th>
Rate
</th>
<th>
Stock
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.ItemID)
</td>
<td>
#Html.DisplayFor(modelItem => item.ItemName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Rate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stock)
</td>
</tr>
}
</table>
I recommend the PagedList package which is available on nuget
https://www.nuget.org/packages/PagedList
Here is the full documentation
https://github.com/TroyGoode/PagedList
This tutorial has a good explanation of paging and how to install and use the packages:
http://www.asp.net/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application
I have found the solution. Using webgrid, we can achieve the paging
#model IEnumerable<ItemMaster>
#{
ViewBag.Title = "Item Details";
WebGrid grid = new WebGrid(Model,rowsPerPage:5);
}
<h2>Item Details</h2>
#grid.GetHtml()
Grid.MVC is an open source and working Grid with sorting and paging
(and unlike telerik you do not need to change anything on controller side just add reference in your view and use.)
To install nugget package (Install)
PM> Install-Package Grid.Mvc -Version 3.0.0
In your view you can auto-create columns as below (or customize see User Guide)
#using GridMvc.Html
#Html.Grid(Model).AutoGenerateColumns()
See Online Demo
you can look for DataTables jquery plugin here. It is a very powerful and light weight plugin that supports sorting and searching inside the table.

Editable "GridView" like control in ASP.NET MVC

I'm trying to build a Editable GridView like control (Order column) with this code in the view:
<table>
<tr>
<th>
Name
</th>
<th>
Order
</th>
<th>
<img alt="Save order" src="<%= Url.Content("~/Content/minisave.png") %>" />
</th>
<th></th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.Encode(item.Name) %>
</td>
<td colspan="2">
<%= Html.TextBox("Order", item.Order, new { size = "3" }) %>
</td>
<td>
<%= Html.ActionLink("Edit", "Edit", new { id=item.id }) %> |
<%= Html.ActionLink("Details", "Details", new { id=item.id })%>
</td>
</tr>
<% } %>
</table>
The result table look like:
The questions are: How I receive this data in my controller? I need a form tag around the table? How I know which Order value belongs to which record?
A couple extra questions: If you see the code I add the size attribute to the input tab but when the browser renders it, the input is larger, how can I fix it?
Thanks for your help!
I've done this before. I did it by having the ID as part of the name, and a form around the entire table. That way the controller pulled all the data from all the rows and updated it all at once like a spreadsheet.
That works well for a unit of work, where you edit the page and save it, though of course you'd need to consider how to cope with your locking strategy, be it optimistic or pessimistic.
However, these days a better alternative might be to use ajax to submit specific values, somewhat like Google Spreadsheet, maybe?

Resources