I have ASPNETCore application with a model that successfully sends email and returns a message to the browser.
[HttpPost]
public IActionResult Index(IndexViewModel model)
{
if (ModelState.IsValid)
{
try
{
// Send the email
_mailService.SendMessage(model.Email, model.Subject, $"From: {model.Name} - {model.Email}, Message: {model.Message}");
ViewBag.SendMessageClass = "p-3 mb-2 bg-success text-white rounded";
ViewBag.UserMessage = $"Nice to hear from you {model.Name}, your message was sent successfully";
ViewBag.JumpToDivId = "#contact_form";
ModelState.Clear();
}
catch (Exception ex)
{
ViewBag.SendMessageClass = "p-3 mb-2 bg-danger text-white rounded";
ViewBag.UserMessage = $"Whoops {model.Name}, we were unable to send the message, return code was {ex.ToString()}.";
ViewBag.JumpToDivId = "#contact_form";
}
}
return View();
}
After the post, I am trying to scroll back to near bottom of the page where the contact form is to show the message sent feedback. I have tried many examples and all just end up with the page at the top after postback not back to the contact form position. Any help appreciated.
Kind Regards,
Neil
trying to scroll back to near bottom of the page where the contact form is to show the message sent feedback
To achieve the requirement of maintaining the scroll position after the post, you can refer to the following approach to store the scroll position in localStorage while user submitting the form then retrieve it and dynamically reset the scroll position after page reloaded.
Html Code
<form>
input fields here
<br />
...
<br />
<input type="submit" value="Submit" onclick="maintainscrollposition()" />
</form>
JS Code
function maintainscrollposition() {
var y = window.scrollY
console.log(y);
localStorage.setItem('topposition', y);
}
$(function () {
var top = localStorage.getItem('topposition');
window.scroll(0, top);
localStorage.removeItem('topposition');
});
Test Result
Related
I created a sample Blazor project. The scaffolding has two examples, (1)calling a C# method that exists IN the web page = counter, (2)calling a server method at the BEGINNING of the web page initialisation = weather table. But not any example for calling a server method and get result when a button is clicked. Is that possible?
For example, can I add a method like this to the "WeathrForecastService.cs":
public int Add(int a, int b)
{
return a + b;
}
and like the "counter" example, add a button on the page, and when the button is clicked, display the result of it:
#page "/fetchdata"
#using BlazorApp1.Data
#inject WeatherForecastService ForecastService
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from a service.</p>
#if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<p>Current count: #[display the result of ForecastService.Add(1,2)]</p>
<button class="btn btn-primary" #onclick="[call ForecastService.Add(1,2)]">Click me</button>
}
#code {
WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
calling a server method and get result when a button is clicked. Is that possible?
Yes. If you're using Blazor Server Side, the server side method will be invoked via SignalR under the hood.
Similar to the way we do in Angular/React, in order to display the result, we need create a _sum field to cache the result so that we can display/change it later:
#code {
private int _sum;
}
And change your onclick as below:
<p>Current count: #this._sum</p>
<button class="btn btn-primary" #onclick="()=>this._sum= ForecastService.Add(1, 2)" >Click me</button>
I am working on an ASP.NET Core 2.1 MVC app using razor. I have searchQuery.cshtml and a (individually working perfectly) viewQuery.cshtml pages. In my searchQuery page, I let user enter queryId and on clicking "Search" button I want to run the action of ViewQuery that displays the results in viewQuery.cshtml and show the viewQuery below the search button area.
I am not good working with Ajax or so. On Search btn click, I call the viewQuery Get action thru ajax. In the button click, I pass the entered queryId of type int. But, when I load searchQuery page, it throws null exception for passing the queryId. I searched few hous, but didn't get any solution.
searchQuery.cshtml UPDATED
<div>
<div class="col-md-6">
<dl class="dl-horizontal">
<dt>
#Html.DisplayNameFor(model => model.QueryId)
</dt>
<dd>
<input asp-for="QueryId" class="form-control" />
</dd>
</dl>
</div>
<input type="submit" value="Show" />
<!-- CHANGE IN CALL -->
Search
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h3 class="modal-title">Query Answer</h3>
</div>
<div class="modal-body" id="myModalBodyDiv">
</div>
<div class="modal-footer">
Ok
</div>
</div>
</div>
</div>
<script>
function ShowResult() {
// Retrieve queryId
var queryId = $("#QueryId").val();
// DisplayS PROPERLY
alert("Entered ID " + queryId);
// TRIED '/query/viewQuery' ALSO
$.ajax({
type: 'GET',
url: '../query/viewQuery',
data: { queryId: queryId },
success: function (response) {
alert(response); // **DISPLAYS [Object: object]**
$("#myModalBodyDiv").html(response);
$('#myModal').modal("show");
}, error: function (response) {
alert("Error: " + response);
}
});
}
</script>
My ViewQuery action in controller UPDATED
[Route("[controller]/viewQuery/{queryId:int}")]
public async Task<IActionResult> ViewQuery(int queryId)
{
// Retrieve Data from api using HttpClient
....
return PartialView("ViewQuery", qVM); // PartialView(qVM); //View(qVM);
}
Search Query Action UPDATED
[Route("searchQuery")] // customer/searchQuery
public IActionResult SearchQuery()
{
return View();
}
Can anyone please help me how do I achieve my goal. Simple - a text box were user enters queryId. A button on click, want to pass the entered queryId, call a GET action on controller and get the response. Finally show the response below the search button. I was just trying with the above modal dialog, I prefer text and not dialog.
Try & isolate the issue.
Instead of using model.QueryId in the searchQuery.cshtml, simply hardcode any reference to "modelid" - that way at least you are eliminating the possibility that Model is null on that page. Then instead of onclick="ShowResult(#Model.QueryId)"> , hard code some known id instead of #Model.QueryId. Then debug to see if your ViewQuery action method id hit. If the method is hit, then you can take it from there.
Also, I noticed that your jquery calls may need to be modified:
Instead of: $('myModalBodyDiv').html(response); it should probably be $('#myModalBodyDiv').html(response); (the "#" is missing ..) - same for $('myModal').
You can use Partial Pages(ViewQuery page) , in your searchQuery page , you could use Ajax to call server side action with parameter ID . On server side , you can query the database with ID and return PartialView with models :
[HttpPost]
public IActionResult Students (StudentFilter filters)
{
List students = Student.GetStudents(filters);
return PartialView("_Students", students);
}
Then in success callback function of Ajax , you can load the html of partial view to related area in page using jQuery :
success: function (result) {
$("#searchResultsGrid").html(result);
}
You can click here and here for code sample if using MVC template . And here is code sample if using Razor Pages .
Below Mention is the paging i have done using MVC PageList on my partial view and also i have one submit button on my partial view
Controller
var model1 = PrepareTestModel((int)_studAnsdal.Test_Id, Page);
ViewBag.TestId = TestId;
Page++;
return PartialView("_studentPartial", model1.OrderByDescending(v => v.Question_Id).ToPagedList(Page, 1));
View
<input type="submit" Value="Submit Answer" id="abc">
<div class="pagedList">
#Html.PagedListPager(Model, page => Url.Action("TestPaging", "Student", new { page=ViewBag.page, TestId = ViewBag.TestId }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { UpdateTargetId = "results", HttpMethod = "POST" }))
</div>
What i want to do is whenver user click on submit i want to shift my paging value to the next page that is one increment to it but i m not getting it done as page value is passed using query string any help is appreciated
I'm new to MVC (using 4, framework 4.0) and I understand the basics but this page redirect isn't working as I expect. The application is a login/authentication which if the user successfully logs in it redirects them to the target application. That part works just fine. However the user may forget his/her login credentials, so I have a series of pages that will prompt the user for a registered email address and decoded captcha value. If that information is validated then another page prompts for a series of (up to 3) pre-determined security question answers (in the case of a password forgotten). If the security challenge question is successfully answered the user is redirected to a password change page. At any point in the process the user may click a cancel button which should redirect back to the login page and clear any state variables tracking their progress through the recovery process. The problem is I keep getting stuck on pages that even after a RedirectToAction("SomeAction", "SomeController"); I still stay on the page? The URI even changes on the browser but the page asking for email address or security question stays active. I'm using an ajax $.get() to call various actions for submit and cancel.
view is defined like this:
#using (Html.BeginForm("RecoverUserCredentialsByModel", "Account", FormMethod.Get, new { id = "form1" }))
{
<!--... three input controls and a submit and cancel button-->
<p>
<button id="btnSubmit" onclick="return CheckUserEmail()">Submit</button>
<button id="btnCancel" onclick="return CancelRecovery()">Cancel</button>
</p>
}
<script type="text/javascript">
function CheckUserEmail() {
var emailAddress = document.getElementById("EmailAddress").value;
var pictogramHref = document.getElementById("pictogramHref").src;
var pictogramAnswer = document.getElementById("Pictogram").value;
if (emailAddress != null) {
var url = "/Account/ValidateEmail";
$.get(url, { "emailAddress": emailAddress, "pictogramHref": pictogramHref, "pictogramTranslation": pictogramAnswer }, null);
return true;
}
}
</script>
<script type="text/javascript">
function CancelRecovery() {
var url = "/AuthenticationModule/Account/CancelRecovery";
$.get(url, {}, null);
return true;
}
</script>
Codebehind redirections look like:
/// <summary>
/// Global cancel recovery, clears the stateful session object and redirects back to login view
/// </summary>
/// <returns>ActionResult</returns>
[AllowAnonymous]
public ActionResult CancelRecovery()
{
LoginModel statefulLoginModel = null;
try
{
// Reset everything active and redirect to login view
statefulLoginModel = new LoginModel();
Session["LoginModel"] = statefulLoginModel;
return Redirector(statefulLoginModel);
}
catch (Exception ex)
{
// Log the error and Reset everything active and redirect to login view
FileLogger.Log(ex);
statefulLoginModel = new LoginModel();
Session["LoginModel"] = statefulLoginModel;
return Redirector(statefulLoginModel);
}
}
[AllowAnonymous]
public ActionResult Redirector(LoginModel model)
{
... some code
Session["LoginModel"] = statefulLoginModel;
if (loginState == 0)
{
RedirectToAction("LogOn");
}
}
When it hits the RedirectToAction("LogOn"); the view "RecoverUserInfo" stays active on the browser and no redirection occurs?
What am I doing wrong?
Try this..........
Proper Syntax is return RedirectToAction("ActionName","ControllerName");
In this case if Logon Action is written on the same Controller Then use following Code..
return RedirectToAction("LogOn");
or it is written on another controller then just replace your Action Name and Controller Name in the following code.
return RedirectToAction("ActionName","ControllerName");
In a Create view which properly starts with a...
#using (Html.BeginForm("Create", "Song", FormMethod.Post, new { enctype = "multipart/form-data" }))
and among a few other fields has a...
<div class="editor-field">
<input type='file' name="SongFileUpload" id="SongFileUpload" onchange="readURL(this);" />
#Html.ValidationMessageFor(model => model.SongData)
</div>
ending with a
<p>
<input type="submit" value="Create" />
</p>
if I browse for and select a filename which contains a beginning and ending parentheses within the name... when I click on the "Create" button to submit it... when just running of the localhost server VS2010 provides... it just bops right over to the IE (v10) error of....
>This page can't be displayed
>
>•Make sure the web address http://localhost:63129 is correct.
>•Look for the page with your search engine.
>•Refresh the page in a few minutes.
At first I thought it might be because the filename began with an "#" symbol. but that's not it as I can select another filename that is similarly as long but does not contain the parentheses and it jumps into the
[HttpPost]
public ActionResult Create( )
Like it should and everything works as it should.
What the heck as going on here?
Below is the JavaScript for the "readURL( )" function.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#SongMimeType').attr('value', input.files[0].type);
$('#SongData').InnerHtml = (e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
My guess is the JavaScript function is what might be blowing-up??
How would I fix it to handle this filenames with parentheses??