.Net 5 blazor server app property is null in razor but has data after webapi call - razor

I am coding a .Net 5 Blazor server side app and - sorry if I am using the wrong terminology - can't seem to pin down why the razor page's object/property is null, yet the code-behind method that populates that object/property contains data from a webApi. I am trying to use the repository pattern, dto objects, dependency injection, webapi, and efcore.
In Startup.cs > ConfigureServices() I have:
services.AddHttpClient<IDocumentNumbersDataService, DocumentNumbersDataService>
(client => client.BaseAddress = new Uri("https://localhost:44323/"));
For the UI I have Home.razor:
#page "/Home"
<form method="get">
<div class="input-group-append">
<button type="submit" class="btn btn-primary" #onclick="SearchDocumentNumbers">Search</button>
</div></form>
#if (DocumentNumbers == null)
{
<p><em>Loading...</em></p>
}
else
{
```
show table of document numbers using foreach()
```
}
and its code-behind Home.cs:
public partial class Home
{
public IEnumerable<DocumentNumberDto> DocumentNumbers { get; set; }
[Parameter]
public string ProjNumber { get; set; }
[Inject]
public IDocumentNumbersDataService DocumentNumbersDataService { get; set; }
protected async Task<IEnumerable<DocumentNumberDto>> SearchDocumentNumbers()
{
ProjNumber = "1012100100";
var DocumentNumbers = await DocumentNumbersDataService.GetDocumentNumbersAsync(ProjNumber); //DocumentNumbers gets populated with Dto objects
}
}
The call to GetDocumentNumbersAsync() in DocumentNumberDataService is:
public async Task<IEnumerable<DocumentNumberDto>> GetDocumentNumbersAsync(string ProjNumber)
{
return await JsonSerializer.DeserializeAsync<IEnumerable<DocumentNumberDto>>
(await _httpClient.GetStreamAsync($"api/documentnumbers/{ProjNumber}"),
new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
}
The problem: DocumentNumbers property is null in Home.razor even though the IEnumerable<DocumentNumbersDto> DocumentNumbers is populated via...
var DocumentNumbers = await DocumentNumbersDataService.GetDocumentNumbersAsync(ProjNumber);
I suspect I overlooked something simple.

Related

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

ASP.NET Cross session list

I'm attempting to make a simple page that will compare multiple form submissions.
I have a html page with a form, and a for-loop that generates a div for each item in a list of form submissions. The list is passed from the controller. I am trying to maintain the list in the controller rather than rely on a database.
When I try to resubmit the form, which should add another object to the list, the list re initializes.
In debugging, I see that the list is empty when the form gets submitted. I'm unsure as to the correct terminology, but it seems that the list is emptied whenever the view is rendered. Is there a way to maintain list contents?
I know there are better ways to do this, and welcome any advice. I'm still learning, so pleas go easy.
Thanks!
This is the simplified controller.
namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
List<paymentPlan> plansList = new List<paymentPlan>();
public ActionResult Index()
{
return View(plansList);
}
[HttpPost]
public ActionResult Index(FormCollection collection)
{
paymentPlan Project = new paymentPlan();
Project.customerName = Convert.ToString(collection["customerName"]);
plansList.Add(Project);
return View(plansList);
}
}
}
This is my simplified view.
#model List<MvcApplication2.Models.paymentPlan>
#using (Html.BeginForm("index", "home", FormMethod.Post, new { Id = "signupForm" }))
{
<label for="customerName">Customer Name:</label>
<input type="text" name="customerName" class="form-control required" />
#Html.ValidationSummary(true)
<input type="submit" value="Calculate" class="btn btn-primary" />
}
#{
bool isEmpty = !Model.Any();
if (!isEmpty)
{
foreach (var i in Model)
{
<div>
Name: #i.customerName
</div>
}
}
}
This is my simplified model.
namespace MvcApplication2.Models
{
public class paymentPlan
{
public string customerName { get; set; }
}
}
I think that's a question of controller and asp.Net MVC lifecycle !
A controller lifetime is the same as the request, for each request a new controller is created and once the work is done it's disposed!
So try to remove this List<paymentPlan> plansList = new List<paymentPlan>(); and work with TempData[] or ViewData[] or Session[] like this :
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
Session["plansList"] = ((List<paymentPlan>)Session["plansList"])!=null? (List<paymentPlan>)Session["plansList"] : new List<paymentPlan>();
return View((List<paymentPlan>)Session["plansList"]);
}
[HttpPost]
public ActionResult Index(FormCollection collection)
{
paymentPlan Project = new paymentPlan();
Project.customerName = Convert.ToString(collection["customerName"]);
((List<paymentPlan>)Session["plansList"]).Add(Project);
return View(plansList);
}
}
check this : http://www.asp.net/mvc/overview/getting-started/lifecycle-of-an-aspnet-mvc-5-application

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.

How to navigate in ServiceStatck Razor pages + ServiceStack api?

In my webapp
webApp
\Views
\Views\School
\Views\School\School.cshtml
\Views\School\Schools.cshtml
In Request and Response classes:
[Route("/v1/school", Verbs = "POST")]
[DefaultView("School")]
public class SchoolAddRequest : School, IReturn<SchoolResponse>
{
}
public class SchoolResponse
{
public School School { get; set; }
public SchoolResponse()
{
ResponseStatus = new ResponseStatus();
Schools = new List<School>();
}
public List<School> Schools { get; set; }
public ResponseStatus ResponseStatus { get; set; }
}
In SchoolService.cs:
[DefaultView("School")]
public class SchoolService: Service
{
public SchoolResponse Post(SchoolAddRequest request)
{
var sch = new School {Id = "10"};
return new SchoolResponse {School = sch, ResponseStatus = new ResponseStatus()};
}
}
In school.cshtml:
#inherits ViewPage<Test.Core.Services.SchoolResponse>
#{
Layout = "_Layout";
}
<form action="/v1/School" method="POST">
#Html.Label("Name: ") #Html.TextBox("Name")
#Html.Label("Address: ") #Html.TextBox("Address")
<button type="submit">Save</button>
</form>
#if (#Model.School != null)
{
#Html.Label("ID: ") #Model.School.Id
}
On the browser:
This is suppose to work but it is not, i get a blank page
http://test/school/
This works:
http://test/views/school/
On hitting the 'save' btn the required response is returned but the url on the browser is :
http://test/v1/School
I was expecting it to be:
http://test/School
How can i get the url to work right.? Shouldn't it be
http://test/School on request and response.
http://test/school/ is not returning anything because you don't have a request DTO and a corresponding 'Get' service implemented for the route.
What you need is a request DTO:
[Route("/school", Verbs = "GET")]
public class GetSchool : IReturn<SchoolResponse>
{
}
and the service...
public SchoolResponse Get(GetSchool request)
{
var sch = new School {Id = "10"};
return new SchoolResponse {School = sch, ResponseStatus = new ResponseStatus()};
}
When you hit 'Save', a 'POST' request will be made to the server through the route 'v1/school' because the form tag you specified has:
<form action="/v1/School" method="POST">
Hope this helps.