MVC: 404 error, ViewModel not found - html

I'm new to MVC and getting this depressing error when I try to insert buttons into a table.
I have for my .cshtml ViewModel in EditorTemplates:
#model EditorForSample.Models.ProductViewModel
<tr>
<td>#Html.CheckBoxFor(m => m.Selected)</td>
<td colspan="1">
#Model.Name
#Html.HiddenFor(m => m.Name)
</td>
<td>
#Model.Password
#Html.HiddenFor(m => m.Password)
</td>
<td>
#Html.RadioButtonFor(e => e.Locked, true)</td>
<td>
#Html.RadioButtonFor(e => e.Locked, false)</td>
</tr>
And for the model:
public class ProductViewModel
{
public bool Selected{ get; set; }
public string Name { get; set; }
public string Password { get; set; }
public bool Locked { get; set; }
}
I'm getting a 404 error in the .cshtml even though I cannot determine why the syntax is wrong.
Edit: Okay, it turns out that the above actually does work when I manually change the URL and instead my problem is one of the routing randomly changing of its own accord and trying to redirect to the model view CSHTML.

You should send the viewmodel to the view like this.
ProductViewModel productViewModel= new ProductViewModel();
//populate productViewModel with values
View(productViewModel);
also make sure that you added the correct namespace at the top of your file
like this :
using Project.Models;
EDIT:
example for adding Radiobutton in view for same model property:
#Html.RadioButtonFor(model => model.Selected, "false")
#Html.RadioButtonFor(model => model.Selected, "true")
In controller it should be like:
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("IsFemale: " + model.Selected);
}
I think this will inspire you. Of course you have to modify it according to the way you need.

Related

Map Partial Json Data to Model Class

I have a API Json data that contains a lot of information, but I only need to map one attribute to my model class, say Programname, I don't care of other information. I am using Json converter to DeserializeObject the API data. Is it possible to only map partial Json data to my model class? Right now, I receive error message as below if I only map one attribute of the Json data. Thanks.
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List`1[WebApplication2.Program]', but this ViewDataDictionary instance requires a model item of type 'System.Collections.Generic.IEnumerable`1[WebApplication2.Models.Program]'.
public class Program
{
public int Prog_id { get; set; }
public string Programname { get; set; }
}
Controller:
public async Task<IActionResult> Index()
{
var Client = new HttpClient();
Client.DefaultRequestHeaders.Accept.Clear();
Client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("appllication/json"));
HttpResponseMessage res = await Client.GetAsync("my url");
if (res.IsSuccessStatusCode)
{
var result = res.Content.ReadAsStringAsync().Result;
List<Program> programs = JsonConvert.DeserializeObject<List<Program>>(result);
return View(programs);
}
else
{
throw new Exception(res.ReasonPhrase);
}
}
View
#model IEnumerable<WebApplication2.Models.Program>
<h1>Index</h1>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
Program
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Programname)
</td>
</tr>
}
</tbody>
</table>
change view model to list and fix a namespace
#model List<WebApplication2.Program>
and IMHO use await instead of .Result
var result = await res.Content.ReadAsStringAsync();
List<Program> programs = JsonConvert.DeserializeObject<List<Program>>(result);
return View(programs);
I figured it out what the problem was now. The word "Program" is a reserved word in asp.net core. After I changed the Program to something else, it works. :/

Passing wrong model into partial

I am building my first web app with .net core razor pages.
I am trying to move my menu to be partial, so I can reuse it as I wish but I must be doing something wrong.
The error is:
The model item passed into the ViewDataDictionary is of type 'BrambiShop.UI.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel'.
I know there are few topics on that, but I am struggling " days after work now and I couldnt find any exact solution. I quess I kinda understand what I am doing wrong. But I dont know how to do it right.
I am trying to load the partial from index as follows:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
#{ await Html.RenderPartialAsync("_SideCategoriesMenu"); }
The partial is:
#page
#model BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel
#*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*#
#foreach (var category in Model.Categories)
{
<button class="font-weight-bold" data-toggle="collapse" href="#MenuCollapse_#Html.DisplayFor(modelItem => category.Id)"
aria-expanded="false" aria-controls="MenuCollapse_#Html.DisplayFor(modelItem => category.Id)">
#Html.DisplayFor(modelItem => category.Name)
</button>
<!-- Collapsible element -->
<div class="collapse text-center" id="MenuCollapse_#Html.DisplayFor(modelItem => category.Id)">
#foreach (var subCategory in Model.SubCategories.Where(x => x.CategoryId == category.Id))
{
<form action="/url/to/action" Method="GET">
<input type="hidden" name="Property" value="#Html.DisplayFor(modelItem => subCategory.Id)" />
<button type="submit">
<i class="fas fa-caret-right pl-1"></i>#Html.DisplayFor(modelItem => subCategory.Name)
</button>
</form>
}
</div>
<!-- / Collapsible element -->
}
And at last the cshtml.cs
using BrambiShop.API.Models;
using BrambiShop.UI.Services;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BrambiShop.UI.Pages.Shared
{
public class _SideCategoriesMenuModel : PageModel
{
private readonly IApiClient _Client;
public _SideCategoriesMenuModel(IApiClient client)
{
_Client = client;
}
public IList<Category> Categories { get; set; }
public IList<SubCategory> SubCategories { get; set; }
public async Task OnGet()
{
Categories = await _Client.GetCategoriesAsync();
SubCategories = await _Client.GetSubCategoriesAsync();
}
}
}
Can someone help me with that please? I did watch about 10 hours of tutorials to build api and the ground of the web, but this damn partial. I just cant find answer to that anywhere.
Thank you very much for any effort.
EDIT
--- index model
using BrambiShop.API.Models;
using BrambiShop.UI.Services;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BrambiShop.UI.Pages
{
public class IndexModel : PageModel
{
public IndexModel()
{
}
public async Task OnGet()
{
}
}
}
Your Index view has a model of type IndexModel. When you put this line
#{ await Html.RenderPartialAsync("_SideCategoriesMenu"); }
The same model will be passed to _SideCategoriesMenu which is IndexModel. This is why you are receiving the exception because the model passed to the _SideCategoriesMenu is different since it expects BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel.
To go around that, you have to specify the model in the RenderPartialAsync method. ex:
#{ await Html.RenderPartialAsync("_SideCategoriesMenu",YOUR_MODEL_HERE); }
You can replace YOUR_MODEL_HERE with whatever instance of type _SideCategoriesMenuModel. You can have it as a property inside IndexModel. ex:
public class IndexModel : PageModel
{
public IndexModel()
{
}
public SideMenuModel SideMenu { get; set;}
public BrambiShop.UI.Pages.Shared._SideCategoriesMenuModel SideMenuModel{ get; set;}
public async Task OnGet()
{
}
}
}
And then use it in your index view
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
#{ await Html.RenderPartialAsync("_SideCategoriesMenu",Model.SideMenuModel); }
The model you use to create the page needs to contain a complete model for the Menu. Then you need to pass the model in the RenderPartial.
IE:
#{ await Html.RenderPartialAsync("_SideCategoriesMenu", Model.SideMenu); }
Edit--
Add the SideMenu property to your Model so you can access it on the page in the above example.
using BrambiShop.API.Models;
using BrambiShop.UI.Services;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BrambiShop.UI.Pages
{
public class IndexModel : PageModel
{
public IndexModel()
{
}
public SideMenuModel SideMenu { get; set;}
public async Task OnGet()
{
}
}
}

Use SQL Query for Dropdown - ASP.NET Core 2.0; RazorPages; VS 2017; Entity Framework Core

I currently have an ASP.NET Core 2.0 Web Application (built in VS 2017 from the default web application template). I have a RazorPage with a dropdown built in that I would like to populate via a SQL Query. I've used Entity Framework Core to build a model of my database as follows:
public partial class INVOPEContext : DbContext
{
public virtual DbSet<PmeFundData> PmeFundData { get; set; }
modelBuilder.HasAnnotation"Relational:DefaultSchema", "Server\\User");
modelBuilder.Entity<PmeFundData>(entity =>
{
entity.ToTable("PME_FUND_DATA", "dbo");
entity.Property(e => e.Firm).HasMaxLength(255);
});
}
public partial class PmeFundData
{
public string Firm { get; set; }
}
I've updated the RazorPage PageModel (pmepe.cshtml.cs) to include the DBContext and Query:
public class pmepeModel : PageModel
{
private readonly INVOPEContext _db;
public pmepeModel(INVOPEContext db)
{
_db = db;
}
public IActionResult dropdowns()
{
List<PmeFundData> firmList = new List<PmeFundData>();
firmList = (from Firm in _db.PmeFundData
select Firm).Distinct().ToList();
firmList.Insert(0, new PmeFundData {Firm = "All Firms" });
ViewBag.ListofFirms = firmList;
return View();
}
}
Finally, the view with the dropdown (pmepe.cshtml) is as follows:
#page
#model pmepeModel
#{
ViewData["Title"] = "pmepe";
}
<select asp-for="dropdowns"
id="firm"
class="dropdown"
asp-items= "#(new SelectList(ViewBag.ListofFirms, "Firm"))">
</select>
I am getting errors that neither ViewBag nor View exist in the current context in the PageModel (no errors in the view - Intellisense picks it up). Every example I've found on the web is for MVC rather than RazorPages. The solution commonly provided for MVC is imbedding the query in a Controller and adjusting the MVC version in the web.config file. But the RazorPages template doesn't have Controllers and I can't find a web.config file - so I haven't been able to get it to work in my app. Any help you can provide would be most appreciated.
There are multiple issues in your code.
PmeFundData should have Id property, otherwise, you will receive error while running update-database command.
public partial class PmeFundData
{
public int Id { get; set; }
public string Firm { get; set; }
}
ViewBag is not supported in RazorPage, you could trace this issue from Add ViewBag to PageModel #6754, you could try ViewData or PageModel Property to bind the object.
Here is a simple code for ViewData.
public class PmepeModelModel : PageModel
{
private readonly CoreRazor2_1.Data.ApplicationDbContext _context;
public PmepeModelModel(CoreRazor2_1.Data.ApplicationDbContext context)
{
_context = context;
}
public IActionResult OnGet()
{
return Page();
}
[BindProperty]
public int SelectedFirm { get; set; }
[ViewData]
public IList<PmeFundData> ListofFirms { get {
return Dropdowns();
}
}
public IList<PmeFundData> Dropdowns()
{
List<PmeFundData> firmList = new List<PmeFundData>();
firmList = new List<PmeFundData> {
new PmeFundData{ Id = 1, Firm = "F1"},
new PmeFundData{ Id = 2, Firm = "F3"},
new PmeFundData{ Id = 3, Firm = "F2"}
};
//firmList = (from Firm in _context.PmeFundData
// select Firm).Distinct().ToList();
firmList.Insert(0, new PmeFundData { Firm = "All Firms" });
return firmList;
//ViewData["ListofFirms"] = firmList;
}
public async Task<IActionResult> OnPostAsync()
{
var value = SelectedFirm;
if (!ModelState.IsValid)
{
return Page();
}
_context.PmeFundData.Add(PmeFundData);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
}
View
#page
#model CoreRazor2_1.Pages.PmepeModelModel
#{
ViewData["Title"] = "PmepeModel";
}
<h2>PmepeModel</h2>
<h4>PmeFundData</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<select asp-for="#Model.SelectedFirm"
class="dropdown"
asp-items="#(new SelectList((IEnumerable<PmeFundData>)#ViewData["ListofFirms"], "Id" ,"Firm"))">
</select>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
You may also learn Razor Page from Introduction to Razor Pages in ASP.NET Core

MVC 4 HTML is never decoded on POST

I am using a Kendo editor to create email templates and on POST, once a change to the template has been submitted, always renders in encoded HTML.
This is my razor code on the page:
#model Business.Models.Administration.EmailSetupViewModel
#using Kendo.Mvc.UI;
<h2>Application Stages Portal</h2>
<h4>Email Setup</h4>
#using (Html.BeginForm())
{
if (Model.EmailSaved)
{
<h2>
Email template saved</h2>
}
else
{
#* #Html.DisplayFor(m => m.EmailSavedMsg)*#
}
#Html.DropDownListFor(m => m.EmailTemplateToEdit, Model.EmailTemplatesList)
<input type="submit" name="setup" value="setup" />
if (Model.ShowEmailForm)
{
<div id="email-edit">
#Html.Label("Title")
#Html.TextBoxFor(m => m.EmailTitle, new { style = "width:200px" })
<br />
#(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 600px;height:440px" })
.Value(#<text>
#Html.Raw(Model.EmailBody)
</text>))
</div>
<input type="submit" id="btnSaveTemplate" name="update" value="update" />
<h2>
Please note</h2>
<p>
The following items are <i>reserved and should not be changed, you may move them
to a different place within the message. </i>
<ul>
<li><*name*> e.g. Fred Flinstone </li>
<li><*membernumber*> e.g. 12345678 </li>
</ul>
</p>
}
}
And this is where the actual editor markup is on the page
#(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 600px;height:440px" })
.Value(#<text>
#Html.Raw(Model.EmailBody)
</text>))
Model.EmailBody contains the actual string.
When I GET the page, it renders fine. But when I do POST it never decodes so the rendering is wrong. I don't want to see all the HTML tags but the actual formatting.
This is my Controller code:
#region Email template
[HttpGet]
public ActionResult EmailSetup()
{
ViewBag.DisplayName = StaticFunctions.GetDisplayName(this.User.Identity.Name);
EmailSetupViewModel model = new EmailSetupViewModel();
Business.Administration.Email Email = new Business.Administration.Email();
var list = Email.GetTemplateList();
model.EmailTemplatesList = list.OrderBy(o => o.Text).ToList();
return View(model);
}
[HttpPost]
public ActionResult EmailSetup(EmailSetupViewModel model, string value, string editor)
{
ViewBag.DisplayName = StaticFunctions.GetDisplayName(this.User.Identity.Name);
string body = HttpUtility.HtmlDecode(editor); //encode to db
if (Request["update"] != null)
{
Business.Administration.Email Email = new Business.Administration.Email();
model.EmailSaved = Email.SaveTemplate(model, body);
//ModelState.Clear(); // when doing POST - clearing the ModelState will prevent encode of HTML (Default behaviour). This isn't good long term solution.
if (model.EmailSaved)
{
model.EmailSavedMsg = "Template saved";
}
else
{
model.EmailSavedMsg = "Template couldn't be saved";
}
model.EmailTemplatesList = Email.GetTemplateList();
model = Email.GetTemplate(model);
model.EmailBody = HttpUtility.HtmlDecode(model.EmailBody);
return View(model);
}
else
{
Business.Administration.Email Email = new Business.Administration.Email();
model.EmailTemplatesList = Email.GetTemplateList();
model = Email.GetTemplate(model);
model.EmailBody = HttpUtility.HtmlDecode(model.EmailBody);
return View(model);
}
}
#endregion
This is my model, I am using [AllowHtml] attribute on the property.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
namespace Business.Models.Administration
{
public class EmailSetupViewModel
{
public EmailSetupViewModel()
{
this.EmailTemplatesList = new List<SelectListItem>();
}
public string EmailTemplateToEdit { get; set; }
public List<SelectListItem> EmailTemplatesList { get; set; }
public string EmailTitle { get; set; }
[AllowHtml]
public string EmailBody { get; set; }
public bool ShowEmailForm { get; set; }
public bool EmailSaved { get; set; }
public string EmailSavedMsg { get; set; }
}
}
Finally two screenshots, one on GET and one on POST.
I was using ModelState.Clear() as well but when I clicked back on the browser, it wouldn't decode.
So basically I want help rendering the HTML in my editor on post so it renders properly and doesn't show HTML tags in the editor.

MVC input data into SQL table.Website works without error but when i click ShowTableData everything is Null

Ok so im trying to input data from View to a SQL table i got no errorss but data does not show in the table
I using VisualStudio project is ASP.NET MVC 4 Web Application so it has already created models
views connectionstring controllers and it has a Site.Master so i just make new View from which i will pass data to my controller and then push it to SQL table which i have already created within "Table" folder which is created by default from the project in this "Table" folder i have tables which are needed for registration stuff already created by its own so i just added a new table to this "Table" folder called ProductTable
So ProductTable has 2 values (int)ID which is Primary Keyed and (string)Name
Ok so in "Model" folder i added new Class "ProductTable" with code inside
[Table("ProductTable")]
public class ProductTable
{
[Key]
public int ID { get; set; }
[Required]
public string Name { get; set; }
}
i have created another class there "ProductTableContext " with code inside
public class ProductTableContext : DbContext
{
public DbSet<ProductTable> Products { get; set; }
}
and in my HomeController i have
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your .";
return View();
}
public ActionResult Table()
{
return View(new ProductTable());
}
[HttpPost]
public ActionResult Table(ProductTable product)
{
if (!ModelState.IsValid)
{
return View(product);
}
using (var contex = new ProductTableContext())
{
contex.Products.Add(product);
contex.SaveChanges();
}
return View();
}
}
so Index , About and Contact are Views created by the project itself.
and View
#model Father.Models.ProductTable
#{
ViewBag.Title = "Table";
}
<h2>Table</h2>
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(x => x.Name)
#Html.EditorFor(x => x.Name)
#Html.ValidationMessageFor(x => x.Name)
</div>
<button type="submit">Create event</button>
}
So the problem is that everything works fine i have no errors but when i close the website and i press debug > stop debugging then i click ShowTableData on ProductTable in ServerExplorer all values are Nulls so its like ihave never added this Data to the table can anyone tell me whats wrong? Thank you!
Add this attribute to your ID property
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]. This will tell EF to have the database generate the Identity when you save the object.