I have an action Create and method Save. The create action simply displays the view as shown below
public ActionResult Create()
{
return view();
}
In create view, i get few fields like Name, Address etc. Once the user enters the data and click on the save button, i call the Save method using ajax call.
In Save method, i am validating the data:
[HttpPost]
public bool Save(UserModel User)
{
if (ModelState.IsValid)
{
// save the data
return true;
}
else
{
return false;
}
}
the response of this method is used in ajax of Create View:
$(function () {
$("#btnSave").click(function () {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/Contoller/Save",
data:
// parameters
async: false,
success: function (data_l) {
if (data_l == true)
{
alert("record has been saved in database");
window.location.href = "#Url.Action("Index","Controller")";
}
else{
alert ("Invalid Entry");
window.location.href = "#Url.Action("Create","Controller")";
}
},
error: function () {
console.log("there is some error");
}
});
});
What i want to achieve is based on the response from the Save method, i should perform two operation. If the data is properly validated, data is saved and index page is loaded back. If validation is failed, i want to display the create view with fields entered along with validation messages.
I am sure that data annotation attributes are properly used in the model. Can someone please help me in solving this.
I suggest you perform validation on server side i.e. in your controller. Perform input validation first, if all fine, save the data on persistent store. If the data is saved successfully load index view or list view (whichever view you want by either return View() or RedirectToResult()). If there are any problem add an error in the ModelState object and return the same view. At client the error will be displayed along with the data already entered by user.
For an example refer below code snippet (there might be other ways however this is what we use at the moment):
public ActionResult AddNewSearch(SearchViewModel searchModel)
{
if (User.Identity.IsAuthenticated)
{
if (ModelState.IsValid)
{
var organizationUser = this.GetUser();
if (organizationUser == null)
{
ModelState.AddModelError("RecordNotFound", string.Format("No organization user found!!!"));
return RedirectToAction("LogOff", "Account");
}
if (this.searchService.GetUserSearch(organizationUser.Id, searchModel.Name) != null)
{
ModelState.AddModelError("RecordAlreadyExists", string.Format("Search already exists!!!"));
return View(searchModel);
}
var userSearchDomainModel = mappingService.Map<SearchViewModel, Search>(searchModel);
searchService.AddUserSearch(organizationUser, userSearchDomainModel);
return RedirectToAction("Index", "Search");
}
}
return RedirectToAction("Index", "Search");
}
Related
I have a Login page which is a partial view, and want to display database connection status when page is shown.
My idea is calling a database testing function in controller through AJAX, which returns the status string. But the controller function is not being fired, and the "success" function just get a HTML as response.
After hours of research but no success.
Could you please help. Thanks!
The controller returns login page:
public ActionResult Login()
{
return PartialView();
}
The AJAX call in Login page:
$(document).ready(function () {
setTimeout(testConn, 100);
});
function testConn() {
$('#msg').text('Connecting database...');
$.ajax({
type: 'GET',
url: '#Url.Action("TestDbConn", "Utils")',
contentType: 'application/json; charset=utf-8',
success: function (s) {
$('#msg').text(s); // s is HTML, not a string what I want
}
});
}
The TestDbConn function in UtilsController:
public JsonResult TestDbConn()
{
string result = "";
try
{
var user = db.UserGroup.FirstOrDefault();
if (user == null)
{
result = "No available data!";
}
else
{
result = "Database connected!";
}
}
catch (Exception ex)
{
result = $"Unable to connect：{ex.Message}";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
Figured it out. It's nothing to do with the PartialView.
Just removes this from authorization section in the Web.Config.
<deny users="?" />
This line prevents users from accessing the Utils controller when not signed in, and [AllowAnonymous] tag does not help!
I have a CSHTML page and I'm having trouble finding the best way to structure my requests flow and maintaining a persistance of what is in the ViewModel with what is being displayed in the View.
I'm using an ASP.NET Web Service as API to connect the website to the database. This is how my Controller is populating the ViewModel before calling the View:
[AllowAnonymous]
[Route("company/sites")]
public async Task<IActionResult> CompanySites()
{
var client = _clientFactory.CreateClient("API");
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", HttpContext.Request.Cookies[Startup._tokenCookieName]);
CompanyAccount user = JsonConvert.DeserializeObject<CompanyAccount>(HttpContext.Request.Cookies[Startup._companyInfoCookieName]);
if (user == null)
{
return RedirectToAction("Index", "Company");
}
CompanySitesViewModel viewModel = new CompanySitesViewModel ();
viewModel.LoggedInCompanyId = user.CompanyId;
// Populate viewModel...
return View(viewModel);
}
The ViewModel:
public class CompanySitesViewModel
{
public List<CompanyDTO> AdministratedCompanies { get; set; }
public CompanySitesViewModel ()
{
AdministratedCompanies = new List<CompanyDTO>();
}
}
And this is one of the places I access data from the ViewModel inside the View:
...
#if (Model.AdministratedCompanies.Count > 0)
{
<div class="list-group list-group-flush">
#for (int i = 0; i < Model.AdministratedCompanies.Count; i++)
{
<button class="list-group-item">
<div>
<h6>#Model.AdministratedCompanies[i].CompanyName</h6>
#if (#Model.AdministratedCompanies[i].CompanyCnpj != null)
{
<span><small class="text-muted">##Model.AdministratedCompanies[i].CompanyCnpj</small></span>
}
</div>
</button>
}
</div>
}
...
My problem starts when I want to manipulate the data displayed in this list. In instance, I want to remove one company from AdministratedCompanies. I'm currently doing a Ajax call directly to the API and, when receiving success, forcing a page refresh so the View gets updated without the deleted company.
This is the Ajax call:
function deleteCurrentSite() {
if (currentCompanyIdToDelete != null) {
$.ajax({
url: "#Startup._apiConnectionString" + "sites/" + currentCompanyIdToDelete ,
type: "DELETE",
success: function (e) {
showAlert('Company deleted. Refreshing page...', true);
// Has to reload page to refresh site list
document.location.reload(true);
},
error: function (e) {
showAlert('Error deleting company.', false);
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + '#Model.Token');
}
});
return false;
}
}
I have background in React development, and it is incredibly easy to just change the state and have the view to be updated, and I seems very unoptimal to have to reload the whole page because of a change.
I have some ideas in mind to solve this:
Find the deleted company's div and delete it manually. Not optimal, even less when I want to add a company and have to create and append the component.
Have the Controller to store the ViewModel and have the Ajax call to send the ID I want to delete to the Controller, that then manages the API calls. But from what I found, if I use RedirectToAction or call the View again after the deletion, the page will still be refreshed (even though this seems a better approach as having Ajax to call the API).
Found some references to this library BeginCollectionItem to create a more dynamic binding between the View and ViewModel, but when I saw it was updated 7 years ago I didn't investigate further.
So what is the best way of creating a dynamic binding between the View and ViewModel including CRUD operations and list redraw when changes occur?
Here's an example of some javascript (jQuery) for a simple get. The handler passes the URL of the "jq_pagename.cshtml":
function DisplayError(jqXHR, textStatus, error) {
errortext = error + jqXHR.responseText;
$('#status').html('');
$('#results').html(errortext);
}
function updateMainDiv(url) {
$('#results').html('');
data = "<img src='/images/waiting.gif'></img>";
$('#status').html(data);
$.get(url, function (data) {
$("#results").html(data);
$('#status').html('');
}).fail(function (jqXHR, textStatus, error) {
DisplayError(jqXHR, textStatus, error);
});
}
For this technique I usually use partials for static view controls on the page... search, top-level nav, etc... and then for main content. the main page includes those, the jq_ page does not. The "results" div is only in the main page. You are sending the GETs or POSTs to the jq_page via javascript and returning their HTML via javascript. This way the exact same controller can be used to update the data and the view. (You're just intercepting the returned HTML and putting it where you like.) Here's an example of processing a form (onsubmit, or onchange select, etc..):
function ProcessFormPost(formID, destURL) {
formresult = $('#' + formID).serialize();
$('#super').html('');
data = "<img src='/images/waiting.gif'></img>";
$('#status-super').html(data);
$.post(destURL, formresult, function (data) {
$("#super").html(data);
$('#status-super').html('');
}).fail(function (jqXHR, textStatus, error) {
DisplaySuperError(jqXHR, textStatus, error);
});
return false;
}
I have this angular js code here:
$http.post('/reports/', JSON.stringify($scope.user));
and its hitting my Reports Controller Post method:
[HttpPost]
public dynamic Post(Array data){
//do something
}
but when I check the data in my Post method when it hits in my breakpoint it appears as null :( how do I pass the data from $scope.user to my Controller. I did a console.log of $scope.user and the data is there, it is an object but trying to pass it in as JSON.
I found this:
public HttpResponseMessage Post([FromBody]Customer cust)
{
var newCust = _Repository.InsertCustomer(cust);
if (newCust != null)
{
var msg = new HttpResponseMessage(HttpStatusCode.Created);
msg.Headers.Location = new Uri(Request.RequestUri + newCust.ID.ToString());
return msg;
}
throw new HttpResponseException(HttpStatusCode.Conflict);
}
would I have to put [FromBody] Reports report instead of Array data
Just do this simple as possible, you are missing the parameter name:
$http.post('/reports/', {data: $scope.user});
Make sure that $scope.user is an Array, else change the type.
I was able to get the actual error message before when I was using jquery ajax+ asp.net web services. However, the same code inside jquery $ajax error no longer works.
Inside my .js I have
$.ajax({
contentType: 'application/json, charset=utf-8',
type: "POST",
url: "/Controller/DoSomething",
data: JSON.stringify({ varname: varvalue }),
cache: false,
dataType: "json",
success: function (wo) {
alert('yay!');
},
error: function (xhr) {
alert('error');
if (xhr.responseText) {
var err = JSON.parse(xhr.responseText);
if (err) {
alert(err.Message);
}
else {
alert("Unknown server error, please try again!");
}
}
}
});
Inside my Controller I have
public JsonResult DoSomething(string folderno)
{
CustomObject obj;
//get the obj value from repository here
throw new Exception("my test error message");
return Json(obj);
}
I looked at the Firebug and it appears that I am getting
"JSON.parse: unexpected character" error.
What I am trying to do here is to fake a situation when getting obj from repository throws an exception. Obviously, return Json(obj) never gets reached.
My question is, how do I deal with this situation and trap the error messages on the JS side? Do I need to do something in my controller?
In my earlier set up of Jquery+asp.net web services, I could throw an exception inside my web service method (as shown in my action now) and it would be trapped in my ajax error and the error message would be parsed out.
Now, it would appear that I need to catch the exception and pack in myself....question is how? And do I need to do this inside every action? This seems like a lot of work.
One thing I do is create a generic return object for AJAX calls.
Something like:
public class AJAXReturn
{
public string Message { get; set; }
public object Result { get; set; }
}
Then in your return functions wrap them in Exceptions (or create a generic exception handler) that will look something like:
public JsonResult DoSomething(string folderno)
{
CustomObject obj = new { FolderNo = folderno };
AJAXReturn result;
try
{
result.Message = "OK";
result.Result = obj;
}
catch (Exception ex)
{
result.Message = "ERROR";
result.Result = ex;
}
finally
{
return Json(result);
}
}
Edit: On the javascript side, just check your result for data.Message == 'OK'. If it isn't ok you can display either the specific exception info or anything you want.
Edit 2: Sorry I should've mentioned this will always return in the success callback so make sure you parse it there.
I'm new in ASP.NET MVC so the question could appear 'stupid', sorry.
I have a Partial View inside my Home view.
The Partial View submit a form calling an Action Method inside the HomeController.
It works fine with server validation, the problem is that after the post only the Partial View is rendered.
How can I render the entire Home view after post?
About the code:
Inside PartialView I have a form:
<% using (Html.BeginForm("Request", "Home")) { %>
Request is a ActionResult defined inside my HomeController.
[HttpPost]
public ActionResult Request(RequestModel model)
{
if (ModelState.IsValid)
{
// Saving data .....
}
else
{
// Show Server Validation Errors
return View();
}
}
At this time, after the post, the ascx shows the server validation erros but only the PartialView ascx code is rendered.
The Url looks like this after the post:
http://xxxxxxxxxxx/Home/Request
What I want is showing the entire Home view with the ascx inside showing server validation errors.
Try to do a partial submit using jQuery:
<script type="text/javascript">
$(document).ready(function () {
$("input[type=submit]").live("click", function () {
var f = $("input[type=submit]").parents("form");
var action = f.attr("action");
var serializedForm = f.serialize();
$.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data, textStatus, request) {
if (!data == "") {
// redisplay partial view
$("#formDiv").html(data);
}
else {
// do whatever on sucess
}
}
});
return false;
});
});
</script>
Assuming your view/ascx/HTML is something like this:
<div id="formDiv">
<% Html.RenderAction("Request"); %>
</div>
Change return type also:
[HttpPost]
public PartialViewResult Request(RequestModel model)
{
if (ModelState.IsValid)
{
// Saving data .....
}
else
{
// Show Server Validation Errors
return PartialView();
}
}
I was facing same issue in code, so I just made a small modification in my code and it worked.
Instead of returning the same view, I used
return Redirect(Request.Referrer)
Earlier:
return View();