New to reactjs.net. I did my best to follow the instructions on the https://reactjs.net/guides/server-side-rendering.html website but i am still getting the following reference error re: my component: Signup is not defined. The page renders but the Signup component doesnt seem to be there. What am I doing wrong?
ReactConfig.cs:
public static void Configure()
{
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/jsx/welcome.jsx")
.AddScript("~/Scripts/jsx/navbar.jsx")
.AddScript("~/Scripts/jsx/login.jsx")
.AddScript("~/Scripts/jsx/Signup.jsx")
.AddScript("~/Scripts/jsx/about.jsx")
.AddScript("~/Scripts/jsx/contact.jsx");
}
SignUp.cshtml:
#{
ViewBag.Title = "Sign Up";
}
#Html.React("Signup", new { })
#section scripts{
#Scripts.Render("~/bundleSignUp")
#Html.ReactInitJavaScript()
}
class Signup extends React.Component {
constructor(props) {
super(props);
this._onSubmit = this._onSubmit.bind(this);
}
_onSubmit(e) {
console.log("HERE WE GO");
}
render() {
return (
<div>
<NavBar />
<form className="container container-fluid">
<div className="pullDown">
<div className="row">
<div className="col-lg-6 col-md-7 col-sm-8">
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" id="exampleInputEmail1" placeholder="Enter email" ref="email" />
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-7 col-sm-8">
<div className="form-group">
<label htmlFor="exampleInputPassword1">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="Enter Password" ref="passWd" />
</div>
</div>
</div>
<div className="row">
<div className="btn btn-success" onClick={this._onSubmit}>Submit</div>
</div>
</div>
</form>
</div>
);
}
}
Related
I have two forms in my view: One of them is modal and could get excel file. after importing excel file and proccessing its data -> i need these data in the other form of my view. How Can I Handle this?
i want when i submit excel import form, its data show in the first form for sending sms.
Here is my view code
<form asp-controller="Festival" asp-action="SendNotificationToCustomer" method="post">
<div class="card-body">
#await Component.InvokeAsync("AdminWidget", new { widgetZone = AdminWidgetZones.FestivalDetailsTop, additionalData = Model })
<div class="card card-default">
<div class="card-body">
<div class="form-group row" id="OperatorName-area">
<div class="col-md-12">
<div class="input-group">
<div class="col-md-6">
<div class="input-group">
<nop-select asp-for="SelectedCustomerRoleIdsForSms" asp-items="Model.AvailableCustomerRolesForSms" asp-multiple="true" />
</div>
<label asp-for="SMSPhonenumbers" />
<textarea asp-for="SMSPhonenumbers" asp-required="true" />
<span asp-validation-for="SMSPhonenumbers"></span>
</div>
<div class="col-md-6">
#Html.HiddenFor(x=>x.Id)
<label asp-for="TextMessage" />
<textarea asp-for="TextMessage" asp-required="true" />
<span asp-validation-for="TextMessage"></span>
</div>
<div class="input-group-append py-2">
<button type="submit" id="btnSendNotification" class="btn btn-info rounded-sm">
#T("Admin.festival.notification.Button")
</button>
</div>
<div class="input-group-append py-2 mr-2">
<button type="button" name="importexcel" class="btn bg-olive rounded-sm" data-toggle="modal" data-target="#importexcel-window">
<i class="fas fa-upload"></i>
#T("Admin.Common.Import")
</button>
</div>
<span>#Model.PhonenumbersFromExcel</span>
</div>
<span asp-validation-for="TextMessage"></span>
</div>
</div>
</div>
</div>
</div>
</form>
<div id="importexcel-window" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="importexcel-window-title">
<div class="modal-dialog">
<form asp-controller="Festival" asp-action="ImportPhonenumbersFromExcel" method="post" enctype="multipart/form-data">
<div class="form-horizontal">
<div class="modal-body">
<div class="form-group row">
<div class="col-md-2">
<div class="label-wrapper">
</div>
</div>
<div class="col-md-10">
<input type="file" id="importexcelfile" name="importexcelfile" class="form-control" />
<input type="hidden" id="currentId" name="currentId" value="#Model.Id" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary"></button>
</div>
</div>
</form>
</div>
</div>
</div>
I am new to Razor pages and trying to create a page with a partial view. The partial view has a dropdownlist and a text input for Quantity field and a submit button. The Partial View renders correctly but when I click on the Submit button the Model passed to the Code behind has no value.
Here is the code I have
_PartialAddons.cshtml
#*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*#
#{
}
#model Public.Areas.Register.AddonListDto
<form method="post">
#Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
<b>NZD $45</b>
</div>
<div>
<div style="padding:5px;">
<select id="skuSelect" asp-for="SelectedSkus" asp-items="#(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
<option>Please select one</option>
</select>
</div>
<div style="padding:5px;">
<input type="hidden" name="handler" value="Quantity" />
<input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="#Model.Id">
</div>
</div>
<div style="padding:5px;">
<a class="btn green" asp-page-handler="AddToCart">Add to Cart</a>
</div>
</form>
This is the Main Page
#foreach (var addons in Model.StoreAddonList)
{
<div class="panel card panel-default" style="margin-top:10px;">
<div class="panel-heading card-header" role="tab">
<div class="panel-title">
<div class="accordion-toggle" role="button" aria-expanded="true">
<div accordion-heading="" style="width:100%;">
#addons.Title
<i class="pull-right float-xs-right glyphicon glyphicon-chevron-down"></i>
</div>
</div>
</div>
</div>
<div class="panel-collapse collapse in show" role="tabpanel" style="overflow: visible; height: auto; display: block;" aria-expanded="true" aria-hidden="false">
<div class="panel-body card-block card-body">
<div style="padding-top:10px;background-color:#ffffff;clear:both;">
<div style="width:100%">
<div style="float:left;width:20%;text-align:left;">
Name
</div>
<div style="float:left;width:30%;padding-left:10px;">
#addons.Description
</div>
</div>
<div style="float:left;width:40%;padding-left:10px;">
<div>
#{
await Html.RenderPartialAsync("_PartialAddons.cshtml", addons);
}
</div>
</div>
<div style="clear:both;">
</div>
</div>
</div>
</div>
</div>
}
This is the Index.cshtml.cs to handle the submit
public ActionResult OnGetAddToCart(AddonListDto addOnList)
{
var sass = Quantity;
var tass = SelectedSkus;
return null;
}
The AddonListDto is null on the OnGetAddToCart Method. Have been trying to get this working for the past two days. Any help would be greatly appriciated
If you want to submit your data, you need to use OnPost instead of OnGet in razor pages and set the handler name in the <form> tag. For example:
handler:
public ActionResult OnPostAddToCart(AddonListDto addOnList)
partial view:
#model Public.Areas.Register.AddonListDto
<form method="post" asp-page-handler="AddToCart">
#Html.HiddenFor(Model => Model.Quantity)
<div style="padding:5px;">
<b>NZD $45</b>
</div>
<div>
<div style="padding:5px;">
<select id="skuSelect" asp-for="SelectedSkus" asp-items="#(new SelectList(Model.AddonSkus,"SkuId","SkuName"))" class="form-control">
<option>Please select one</option>
</select>
</div>
<div style="padding:5px;">
<input type="hidden" name="handler" value="Quantity" />
<input asp-for="Quantity" name="Quantity" class="form-control ng-untouched ng-pristine ng-valid" max="999" min="0" style="width:150px;" type="number" value="0" id="#Model.Id">
</div>
</div>
<div style="padding:5px;">
<input type="submit" value="Add To Cart" class="btn btn-primary" />
</div>
</form>
Previous component doesn't vanish after navigation method execution. My new component appears in the bottom of old component. What should I do to display new navigated component alone? When I redirect straight to new component blank view is displayed. To generate component I used ng g c componentName.
Navigation:
this.router.navigate(['dashboard'], {relativeTo: this.route});
New component:
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Router:
const routes: Routes = [
{ path : "dashboard", component : DashboardComponent},
{path : "**", component: PageNotFoundComponent}]
#NgModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents =[DashboardComponent, PageNotFoundComponent]
Project structure:
Template
<div class="bg">
<div class="container">
<div class="row">
<div class='col-md-3'></div>
<div class="col-md-6">
<div class="login-box well">
<legend>Sign In</legend>
<div class="form-group">
<input id="username-email" placeholder="E-mail or Username" type="text" [(ngModel)]="username" class="form-control" />
</div>
<div class="form-group">
<input id="password" placeholder="Password" type="text" class="form-control" [(ngModel)]="password"/>
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" [(ngModel)]="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<input (click)="loginButtonClick()" id="login_button" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" />
</div>
<span class='text-center'>Forgot Password?</span>
</div>
</div>
<div class='col-md-3'></div>
</div>
</div>
<router-outlet>
</router-outlet>
<footer class="fixed-bottom">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
worko.com
</div>
<!-- Copyright -->
</footer>
</div>
With the information that you've provided so far, it looks like you've been trying to navigate from the sign in page to the dashboard.
You're still able to see the Login Page fields along with the Dashboard content at the bottom.
And this makes sense since the Router is going to load the contents of the Dashboard Component in the view in the router-outlet. But your Login Component is not a part of a Component that's loaded on the router-outlet.
In such a case, you would create a LoginComponent` with the following content:
<div class="bg">
<div class="container">
<div class="row">
<div class='col-md-3'></div>
<div class="col-md-6">
<div class="login-box well">
<legend>Sign In</legend>
<div class="form-group">
<input id="username-email" placeholder="E-mail or Username" type="text" [(ngModel)]="username" class="form-control" />
</div>
<div class="form-group">
<input id="password" placeholder="Password" type="text" class="form-control" [(ngModel)]="password" />
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" [(ngModel)]="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<input (click)="loginButtonClick()" id="login_button" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" />
</div>
<span class='text-center'>Forgot Password?</span>
</div>
</div>
<div class='col-md-3'></div>
</div>
</div>
</div>
And your RouterConfig will then look something like this:
const routes: Routes = [{
path: "dashboard",
component: DashboardComponent,
canActivate: [CanActivateDashboard], // This is a guard that you'll have to add
},
{
path: "login",
component: LoginComponent
},
{
path: "**",
component: PageNotFoundComponent
}
]
#NgModule({
imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
})],
exports: [RouterModule]
})
export class AppRoutingModule {}
export const routingComponents = [DashboardComponent, PageNotFoundComponent]
By default, you'll load the /login route through which, your user will see the contents of the LoginComponent in the View. Since this will now be loaded using Router, and the contents will be loaded on the <router-outlet>, only the DashboardComponent contents will be loaded on the <router-outlet> once the user is navigated to /dashboard route.
PS: Note that the unauthorized user should not be able to directly navigate to /dashboard. So you will also have to create a Guard in order to prevent that.
I am working on a Blazor page for adding a new object. The object "RepairOrder" has List of object "RepairSection".
On the page there is an area that will loop through the List "RepairOrder"."RepairSections" and show the elements:
<div class="col-lg-10">
#if (sections.Count > 0)
{
foreach (var sec in sections)
{
<h3>Section #sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="#sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="#IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="#IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="#sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="#sec.TechComments" readonly />
</div>
</div>
}
}
</div>
After all the current sections in the list have been added to the page, there is a button to add a new section. When the button is clicked, the function changes a bool value to true to open a modal as a dialog. The modal contains fields to input a new section elements.
function called to open the modal:
protected void AddSectionCalled()
{
_newSection = new RepairSection();
this.isAddNew = true;
}
Modal Code:
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="#CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="#_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="#_newSection.Failure"/>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="#_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="#_newSection.TechComments"/>
</div>
</div>
<br/>
<button class="btn btn-primary float-left" onclick="AddNewSection">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
When the "Add New Section" button is clicked, the "_newSection" object created from the information collected in the modal is added to the "sections" list that was originally looped through when the page was loaded.
private void AddNewSection()
{
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
}
as you can see I added the "StateHasChanged()" after the new section is added to the sections list. However the page does not render to display the new section.
I originally had created dummy data on the page "OnInitAsync()" event that loaded the sections list with data before it was displayed. This way I could make sure the page displayed what was in the list correctly.
How can I make the page re-render the information in the list after user adds a new object to the list?
----Edit-----
Below is the code for the entire page. I will try and minimize this on the weekend, however there really is not a lot here.
#page "/AddRepairOrder"
#using ShopLiveWebVersion2._0.Models
#using ShopLiveWebVersion2._0.DataAccess
#using ShopLiveWebVersion2._0.Services
#using ShopLiveWebVersion2._0.Data
#inject IUriHelper UriHelper
#inject RepairOrderContext context
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10"><h1>Create New Repair Order</h1></div>
</div>
<br /><br />
<form id="AddROForm">
<div class="form-group">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="ControlNumber" class="control-label">Repair Order #: </label>
<input for="ControlNumber" class="form-control" bind="#ro.ControlNumber" maxlength="15" required />
</div>
<div class="col-lg-1">
<label for="TagNumber" class="control-label">Tag #: </label>
<input for="TagNumber" class="form-control" bind="#ro.TagNumber" maxlength="8" />
</div>
<div class="col-lg-3">
<label for="VIN" class="control-label">VIN: </label>
<input for="VIN" class="form-control" bind="#ro.VIN" maxlength="18" />
#*<small id="Chasis" class="form-text text-muted">#ro.GetChassisNumber()</small> figure out how to get chassis from vin after box looses focus*#
</div>
<div class="col-lg-2">
<label for="Make" class="control-label">Make: </label>
<input for="Make" class="form-control" bind="#ro.Make" maxlength="30" />
</div>
<div class="col-lg-2">
<label for="Madel" class="control-label">Model: </label>
<input for="Madel" class="form-control" bind="#ro.Madel" maxlength="30" />
</div>
</div>
<div class="row AddRow">
<div class="col-lg-1"></div>
<div class="col-lg-4">
<label for="Customer" class="control-label">Customer: </label>
<input for="Custoemr" class="form-control" bind="#ro.Customer" maxlength="50" />
</div>
<div class="col-lg-2">
<label asp-for="Location" class="control-label">Vehicle Location: </label>
<select asp-for="Location" class="form-control" bind="#ro.Location">
<option value="">-- Select a Location --</option>
#foreach (var loc in Location)
{
<option value="#loc">#loc</option>
}
</select>
</div>
<div class="col-lg-2">
<label asp-for="Assigned" class="control-label">Assigned: </label>
<select asp-for="Assigned" class="form-control" bind="#ro.Assigned">
<option value="">-- Select an Employee --</option>
#foreach (var emp in Employee)
{
<option value="#emp">#emp</option>
}
</select>
</div>
<div class="col-lg-2">
<label asp-for="Status" class="control-label">Status: </label>
<select asp-for="Status" class="form-control" bind="#ro.Status">
<option value="">-- Select a Status --</option>
#foreach (var st in Status)
{
<option value="#st">#st</option>
}
</select>
</div>
</div>
<br />
<div class="row"><div class="col-lg-1"></div><div class="col-lg-10"><hr id="Double" /></div></div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
#if (sections.Count > 0)
{
foreach (var sec in sections)
{
<h3>Section #sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="#sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="#IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="#IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="#sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="#sec.TechComments" readonly />
</div>
</div>
}
}
</div>
</div>
<div class="row"></div>
</div> #*Form-group*#
</form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-9">
<br /><br />
<button class="btn btn-primary float-right" onclick="#AddSectionCalled">Add New Section</button>
</div>
</div>
#if (isAddNew == true)
{
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="#CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="#_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="#_newSection.Failure" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="#_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="#_newSection.TechComments" />
</div>
</div>
<br />
<button class="btn btn-primary float-left" onclick="AddNewSection()">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
}
#functions
{
private RepairOrder ro;
private RepairOrder incomingRO;
private RepairOrderDataAccess RoData;
private string chassis;
private List<string> Location;
private List<string> Employee;
private List<string> Status;
private FileService fileService;
private List<RepairSection> sections;
private bool isAddNew;
//for new repair section modal
private RepairSection _newSection;
protected override async Task OnInitAsync()
{
ro = new RepairOrder();
Location = new List<string>();
Employee = new List<string>();
Status = new List<string>();
sections = new List<RepairSection>();
isAddNew = false;
fileService = new FileService();
RoData = new RepairOrderDataAccess(context);
await LoadData();
}
private async Task LoadData()
{
Location = await Task.Run(() => fileService.ReadLocation());
Employee = await Task.Run(() => fileService.ReadEmployees());
Status = await Task.Run(() => fileService.ReadStatus());
}
public string IsCApprovedChecked(RepairSection sc)
{
if (sc.CustomerApproved == true)
{
return "checked";
}
else
{
return "";
}
}
public string IsWarrantyChecked(RepairSection sc)
{
if (sc.Warranty == true)
{
return "checked";
}
else
{
return "";
}
}
protected void AddSectionCalled()
{
_newSection = new RepairSection();
this.isAddNew = true;
}
private void AddNewSection()
{
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
}
private void CloseModal()
{
this.isAddNew = false;
}
There is a problem with the way you have bound the onclick event of the button on the modal form.
you have onclick="AddNewSection()"
- writing it this way will likely be interpreted as a pure javascript call and if you inspect the DOM in your browser tools, you will likely see onclick="AddNewSection()" on the button.
You should have onclick="#AddNewSection"
- this way, Blazor will hook up the onclick event to your C# method.
In AccountController, I notice that the sample registration code catches UserFriendlyException and returns the error message in the ViewBag.
How can I return it from a SweetAlert?
[HttpPost]
public virtual async Task<ActionResult> Register(RegisterViewModel model)
{
try
{
// Code omitted for brevity
}
catch (UserFriendlyException ex)
{
ViewBag.ErrorMessage = ex.Message; // I need to return this using SweetAlert
return View("Register", model);
}
}
html code
<form action="javascript:;" id="register-form" class="login-form" method="post">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>Enter required fields. </span>
</div>
#if (#ViewBag.ErrorMessage != null)
{
<div class="alert alert-danger">
<i class="fa fa-warning"></i> #ViewBag.ErrorMessage
</div>
<script>abp.message.error("#ViewBag.ErrorMessage");</script>
<input type="hidden" value=" #ViewBag.ErrorMessage" id="hf_error" >
}
<div class="row">
<div class="col-xs-12">
<input type="text" class="form-control form-control-solid placeholder-no-fix form-group" autocomplete="off" name="name" placeholder="#L("Name")" required autofocus id="name">
</div>
<div class="col-xs-12">
<input class="form-control form-control-solid placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="#L("Surname")" name="surname" required id="surname" />
</div>
<div class="col-xs-12">
<input type="password" class="form-control form-control-solid placeholder-no-fix form-group" autocomplete="off" name="password" placeholder="#L("Password")" required autofocus id="password">
</div>
</div>
<div class="row">
<div class="col-sm-6 text-left">
<div class="forgot-password" style="margin-top: 5px;">
Login To Your Account
</div>
</div>
<div class="col-sm-6 text-right">
<button class="btn green" id="btnSubmit" type="submit">Register</button>
</div>
<hr />
</div>
</form>
jquery function below
var jsonObject = {
Name: name,
Surname: surname,
//EmailAddress: email,
// UserName: username,
Password: password
};
abp.ajax({
url: abp.appPath + 'Account/Register',
type: 'POST',
data: JSON.stringify(jsonObject)
}).done(function(data) {
alert("done");
}).fail(function(data) {
alert("fail");
});
Since that method returns a View result, it makes sense to use ViewBag for the error message.
To show a SweetAlert, add the following in #section Scripts in Register.cshtml:
#section Scripts {
// ...
#if (ViewBag.ErrorMessage != null)
{
<script>abp.message.error("#ViewBag.ErrorMessage");</script>
/*<script>swal("#ViewBag.ErrorMessage", "", "error");</script>*/
}
}
Both <script> tags trigger identical popups.