How to compare emails in javascript? - asp.net-mvc

I am trying to make an edit profile page in which user can update its current email or pwd by inputting current email and password and then give new ones. I am also sending whole data of user(including username and password) when he sign in through viewdata.
#{
var user = (User)ViewData["User"];
}
<div class="account-info mt-3">
<fieldset class="border border-dark p-3">
<legend class="float-none w-auto">Account Info</legend>
<div class="mb-3 simpleinfo">
<label for="email" class="form-label">Enter Your Current Email</label>
<input type="email" class="form-control" name="Username" id="prevemail"/>
</div>
<div class="mb-3 simpleinfo">
<label for="prevpwd" class="form-label">Enter Your Current Password</label>
<input type="password" class="form-control" name="Pwd" id="prevpwd"/>
<button type="button" class="btn btn-success mt-4 checkcred">Update Credentials</button>
</div>
<div class="mb-3 simpleinfo">
<label for="email" class="form-label">Enter new Email</label>
<input asp-for="Username" disabled type="email" class="form-control" id="newemail">
</div>
<div class="mb-3 simpleinfo">
<label for="newpwd" class="form-label">Enter New Password</label>
<input type="password" disabled class="form-control" asp-for="Password" id="newpwd">
</div>
</fieldset>
</div>
Now i want to compare the email that user enters and the email that is present in the user object.
here's my code for this:
<script>
$('.checkcred').click(function() {
var prevemail = $('#prevemail').val();
var prevpassword=$('#prevpwd').val();
if(prevemail==#user.Username&&prevpassword==#user.Password)
{
alert("Validated");
}
else
{
alert("not validated");
}
});
</script>
But it is giving me syntax error on Console: Invalid or unexpected token.
Please lemme know what i am doing wrong.

Related

Passing Current Model to partial View, Handling Large from Server To Clients

i want to pass All Input values of View to My Partial View(Passing User Order to Show Order Summary) but all values got null in partial View Below is My Code.
Submit
<div id="myModal_#Model.CustRef" class="modal fade" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
...Disabled Inputs...
</div>
</div>
</div>
</div>
My Create Order View
<form asp-action="Create">
....
#*<partial name="~/Views/Order/OrderSummary.cshtml" model="Model" />*#
#await Html.PartialAsync("~/Views/Order/OrderSummary.cshtml", new OrderViewModel() { cus_name = Model.cus_name, cus_phone = Model.cus_phone, CustRef = Model.CustRef, Phoneid = Model.Phoneid, modelId = Model.modelId, Quantity = Model.Quantity, Address = Model.Address, CityId = Model.CityId, Date = Model.Date, store_id = Model.store_id })
</form>
Second Question
My Second Question is i have large data to pass to View(Admin Dashboard) to Complete Statistics but its taking too much time. Please tell me any other Efficient way to increase performance.
You need to pass the current input model to the controller through ajax and return
to render the new partial view.
Please refer to the following code:
Controller:
public class OrderController : Controller
{
public IActionResult Index()
{
OrderViewModel orderView = new OrderViewModel();
return View(orderView);
}
public PartialViewResult ShowParitalView(OrderViewModel orderView)
{
return PartialView("OrderSummary", orderView);
}
}
Index view:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script>
$(function () {
$("a").click(function () {
event.preventDefault();
$("div .modal").attr("id", "myModal_" + $("#cus_name").val());
$("a").attr("data-target", "#myModal_" + $("#cus_name").val());
$.ajax({
type: "POST",
url: "/Order/ShowParitalView",
data: $("form").serialize(),
success: function (data) {
$('#partial').html(data);
$("#myModal_" + $("#cus_name").val()).modal('show');
}
})
})
});
</script>
}
<form asp-action="Create">
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" />
<span asp-validation-for="cus_name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" />
<span asp-validation-for="cus_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" />
<span asp-validation-for="CustRef" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" />
<span asp-validation-for="Phoneid" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" />
<span asp-validation-for="modelId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" />
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" />
<span asp-validation-for="store_id" class="text-danger"></span>
</div>
<a href="#" data-toggle="modal" data-target="#myModal_#Model.CustRef"
style="border-radius: 1.5rem; margin-right:8%; margin-top: 1%; border: none;
padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%;
cursor: pointer; text-align:center; font-weight:bolder;">
Submit
</a>
<div id="myModal_#Model.CustRef" class="modal" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
<div id="partial">
</div>
</div>
</div>
</div>
</div>
</form>
OrderSummary Partial View:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" disabled/>
</div>
Here is the result:
For the second question, there are too many SQL query statements in your code, you can try to improve performance by referring to this.

rails amp form error request and response access-control-allow-origin

i'm using rails amp and setting my amp route for contact form
<form id='contactusform' method="POST" class="p2" action-xhr = "<%= addquery_path %>" custom-validation-reporting="as-you-go" target="_top">
<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="as-you-go-name" pattern="p{L}+\s\p{L}+" class="inline-label-input input-item" name='name' value="" required />
<span class="inline-label-label">Name</span>
</label>
<div class="validation-blk">
<span visible-when-invalid="valueMissing" validation-for="as-you-go-name">Please enter your first name</span>
<span visible-when-invalid="patternMismatch" validation-for="as-you-go-name">Please enter characters only</span>
</div>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="email" id="as-you-go-email" class="inline-label-input input-item" value="" name='email' required />
<span class="inline-label-label">Email</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="as-you-go-email">Please enter your email address</span>
<span visible-when-invalid="typeMismatch" validation-for="as-you-go-email"></span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="number" id="phone-number" name='phone' class="inline-label-input input-item" value="" required />
<span class="inline-label-label">contatct number</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="phone-number">Please enter your phone number</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Cityname" name='city' pattern="\w+\s\w+" class="inline-label-input input-item" value="" required />
<span class="inline-label-label">City</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Cityname">Please enter your City</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Statename" pattern="\w+\s\w+" class="inline-label-input input-item" name='state 'value="" required />
<span class="inline-label-label">State</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Statename">Please enter your State</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Country" pattern="\w+\s\w+" class="inline-label-input input-item" name='country' value="" required />
<span class="inline-label-label">Country</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Country">Please enter your Country</span>
</div>
</div>
<div class="form-row">
<div class="inline-form selectionbox">
<label class="inline-label">
<select class="select-box custom-select" required name="eventtype"
id="eventtype">
<option value="">QUERY TYPE</option>
<% #app_config.event_type.split('|').each do |event_name,index| %>
<option value="<%= event_name %>"><%= event_name %></option>
<% end %>
</select>
</label>
<span visible-when-invalid="valueMissing" validation-for="eventtype">selectoption message appears like this</span>
</div>
</div>
<div class="form-row">
<div class="ampstart-input inline-block relative">
<textarea name="message" id="message" class="block" rows="5" cols="50" required placeholder="your message"></textarea>
<!-- <label class="textarea-ab" aria-hidden="true">
Your message
</label> -->
<span visible-when-invalid="valueMissing" validation-for="message"></span>
</div>
</div>
<div class="button button-common">
<input type="submit" value="OK" class="ampstart-btn caps">
</div>
<!-- social icons -->
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
And my controller saves the form in my database, but the browser throws an error.
def addquery
#contact = Lead.new
#contact.name = params[:name]
#contact.email = params[:email]
#contact.phone = params[:phone]
#contact.city = params[:city]
#contact.state = params[:state]
#contact.country = params[:country]
#contact.enquiry_type = params[:eventtype]
#contact.message = params[:message]
#contact.save
end
when i try to submit my AMP form it showing
amp form error request must have access-control-allow-origin
in my browser console.
as well as the
response must have access-control-allow-origin
Set access-control-allow-origin: <your domain> as a response header in the form handler in rails.
Example, if you are running on localhost set form response header as access-control-allow-origin: http://localhost:3000

self._NgForm_14_3.context is not a function

My Code:
<form role="form" #login="ngForm" (ngSubmit)="onSubmit(login.form)">
<div class="form-group">
<label class="control-label" for="adviserUsername">Username</label>
<input class="form-control" [(ngModel)]="adviserUsername" #username="ngModel" placeholder="Enter Username" type="text" name="adviserUsername"
required>
<div *ngIf="username.touched && username.errors">
<div class="alert alert-danger" *ngIf="username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" [(ngModel)]="passwordText" #password="ngModel" id="password" name="password" placeholder="Password"
type="password" required>
</div>
<div class="alert alert-danger" *ngIf="password.touched && password.errors">Password is required</div>
<button type="submit" class="btn btn-block btn-lg btn-primary" (click)="login()" [disabled]="!login.valid">Login</button>
</form>
Error which I am getting is
self._NgForm_14_3.context is not a function
Here's a Snapshot
The Solution is simple
I was using a click event on the button click - which was using login() - this was double reference and created a problem ...
Code:
Line Fixed >>
<button type="submit" class="btn btn-block btn-lg btn-primary" [disabled]="!login.valid">Login</button>

Google's new recaptcha not validating

Am I missing something? I copied this code snippet over:
Automatically render the reCAPTCHA widget
I entered my registered data-sitekey. The reCAPTCHA displays and works when I check the box, but if I don't check the box and submit my form, the reCAPTCHA doesn't stop the user submission and my controller processes the request.
#model Medicaid.WebUI.ViewModels.RequestModel
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<table class="table">
<tr>
<td>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "request-form", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Request</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">First Name</label>
<div class="col-lg-10">
<input type="text" value="#Model.FirstName" class="form-control" maxlength="50" name="FirstName" id="FirstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-lg-2 control-label">Last Name</label>
<div class="col-lg-10">
<input type="text" value="#Model.LastName" class="form-control" maxlength="50" name="LastName" id="LastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" value="#Model.Email" class="form-control" maxlength="100" name="Email" id="Email" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2"><br /><br />
<div class="g-recaptcha" data-sitekey="IenterMykeyHere"></div><br /><br />
<button type="submit" class="btn btn-primary">Submit Request</button>
</div>
</div>
</fieldset>
}
</td>
</tr>
</table>
<br /><br />
#Html.ValidationSummary()
I was having this issue and re-read the documentation, and worked it out as the following:
function onBegin() {
$("input[type='hidden']").val(grecaptcha.getResponse());
}
You have to add a javascript function to the "onBegin" parameter of the AjaxOptions object from the MVC html helper - that will copy the value of the widget's response to a hidden variable you need to declare inside your form, so the submit button sends it to the controller. Don't forget to add a variable with the same name to the "RequestModel" view model so that the mvc model-binding passes it and you then will be able, in the server, to know if the user has clicked the button or not.
#using (Ajax.BeginForm("NewRecaptchaVerify", "ReCaptcha", new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "onSuccess",
OnFailure = "onFailure",
OnBegin = "onBegin",
OnComplete = "onComplete"
}))
{
#Html.HiddenFor(m => m.Response)
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<input type="submit" id="btnSubmit" value="Submit" />
}
(for the record, I am now facing the problem of knowing, in the server, in cases where the widget prompted the user to enter a text input, after clicking the button - whether he/she entered the text or not. Seems to me that in the end I will have no way out other than performing a GET request, in the server, to the widget's api, as they put it in the documentation: https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=response_string&remoteip=user_ip_address

File upload using AngularJS and Rails

I have a model BOOK that will insert the book details through angularjs controller
Here is my view:
<h1 align="center">Books</h1>
<div ng-controller="BooksCtrl" class="container">
<div class="row-fluid">
<div class="col-md-6">
<form ng-submit="addBook()" class="loginform cf">
<input type="text" ng-model="newBook.title" placeholder="Title of the Book" required>
<input type="text" ng-model="newBook.isbn" placeholder="ISBN Number of Book" required>
<input type="file" ng-model="newBook.book_link">
<input type="text" ng-model="newBook.edition" placeholder="Edition of the book" required>
<input type="text" ng-model="newBook.publication_id" placeholder="Select the publication ID" required>
<input type="submit" value="Add Book">
</form>
<div ng-show="editorEnabled" class="loginform cf">
<form ng-submit="update()">
<input type=text ng-model="editableBook.title" ng-show="editorEnabled" required>
<input type=text ng-model="editableBook.body" ng-show="editorEnabled" required>
<input type="submit" value="Update" class='btn'>
close
</form>
</div>
<div ng-show="selectedBook" class="loginform cf">
<h2>{{selectedBook.title}}</h2>
<p>{{selectedBook.body}}</p>
</div>
</div>
<div class="col-md-6">
<ul style="list-style-type: none;">
<li ng-repeat="book in books" class="loginform cf" >
<div>
<div>{{book.title}}</div>
<a href="">
<img src="{{book.book_link.thumb.url}}"/>
</a>
<button href="#" ng-click="showBook(book)" class="btn">Show</button>
<button href="#" ng-click="enableEditor(book)" class="btn">edit</button>
<br>
</div>
</li>
</ul>
</div>
</div>
</div>
My angularjs Controller function is:
book = Book.save($scope.newBook, function(data,headers) {
console.log(book);
$scope.books.push(book);
}, function(data,headers) {
// do the error case
console.log(data);
if (data.status == 422)
{
alert("validation is failed book should be unique");
}
});
The problem is that it is storing all the details except the book pdf upload. It is not passing even the name. How can I solve this? Any Suggestions would be appreciated.

Resources