I want to call a view using Ajax script:
In main view:
<script>
var onCommand = function (column, command, record, recordIndex, cellIndex) {
Ext.Msg.alert('record = ' + record.data.ID);
Ext.Ajax.request({
url: '/Details/',
method: 'GET',
params: {
id: record.data.ID
},
success: function (response) {
var result = (response.responseText);
if (result != "") {
modelName = result;
CreateLookUp(combo, id, false, true);
} else {
CreateLookUp(combo, id, true, false);
}
}
});
}
</script>
Controller:
// GET: Bob/Details/5
public ActionResult Details(String ID)
{
int id = Convert.ToInt32(ID);
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
BobRepository bobRepository = new BobRepository();
Bob bob = bobRepository.GetBob(id);
if (bob == null)
{
return HttpNotFound();
}
return View(bob);
}
The function call of the controller is called, the turget view is not returned. What is the reason?
I am not sure what you are trying to do, I am assuming you are filling that view in some pop up modal, first you need to return partial view instead of view, i suggest checking if the request is ajax then return partial view else return view,
something like this
if(Request.IsAjaxRequest())
{return PartialView(bob);}
else
return View(bob);
in your js, parse the text to html, you can use jquery.htmlparse
success: function (response) {
var result = $.parseHTML(response);
//do what you want with your html
Related
In ASP.NET MVC, I am trying to implement user authentication. Credentials are stored in SQL table.
I have a login page, when user enters credentials I am calling the JavaScript function shown here. Instead of redirecting to home page, it is returning html content of home page. May I know what I am doing wrong?
$("#btnsubmit").click(function () {
$('#lblvalidationmsg').text("");
var username = $('#txtuserId').val();
var password = $('#txtpassword').val();
if (username != "" && password != "") {
var LoginInfo = {};
LoginInfo.UserName = username;
LoginInfo.Password = password;
LoginInfo.RedirectURL = getParameterByName("redirecturl");
$.ajax({
url: '/Users/IsValidUser',
method: 'POST',
// url: '#Url.Action("IsValidUser", "Users")',
// datatype: "html",
//contentType: 'application/json; charset=utf-8',
data: JSON.stringify(LoginInfo),
success: function (data) {
if (data == "True") {
$('#lblvalidationmsg').text("Sucess");
}
else {
$('#lblvalidationmsg').text("Invalid User Name or Password.");
}
},
error: function (jqXHR) {
$('#divErrorText').text(jqXHR.responseText);
$('#divError').show('fade');
}
});
}
});
My controller method.
[AllowAnonymous]
[HttpPost]
public ActionResult IsValidUser(LoginInfo loginInfo)
{
bool isvalid = false;
try
{
userhelper = new UserHelper();
isvalid = userhelper.IsValidUser(loginInfo.UserName, loginInfo.Password);
if (isvalid)
{
System.Web.Security.FormsAuthentication.SetAuthCookie(loginInfo.UserName, false);
if (string.IsNullOrEmpty(loginInfo.RedirectURL))
{
return RedirectToAction("Index", "Home");
}
}
}
catch(Exception ex)
{
}
return RedirectToAction("Login");
}
}
I have Search View Where user enters Employee ID, Upon Clicking Button an Action Method is Executed and user is Redirected to Employee Details View.
If Employee Id not Matches I want to Retain the Same Search View and display a Label with Employee Details not Found Message in MVC,
Please help on doing the above Fucntionality in my Controller.
[HttpGet]
public async Task<ActionResult> Details(string firstName)
{
var empDetails = await _context.EmpDetails
.FirstOrDefaultAsync(m => m.FirstName == firstName);
if (empDetails == null)
{
// ???
}
return View(empDetails);
}
It is good practice to have ViewModel classes. Make one, and use it to transfer domain objects and messages to your view. Like this:
class EmpDetailsViewModel
{
public EmpDetail Emp { get;set; }
public string Message { get;set; }
}
[HttpGet]
public async Task<ActionResult> Details(string firstName)
{
var vm = new EmpDetailsViewModel();
var empDetails = await _context.EmpDetails
.FirstOrDefaultAsync(m => m.FirstName == firstName);
if (empDetails == null)
{
vm.Message = "Employee not found (or whatever)"
}
else
{
vm.Emp = empDetails;
}
return View(vm);
}
Then, in your view, just do
if (Model.Emp == null)
{
<span>#Model.Message</span>
}
else
{
<div>Emp details stuff </div>
}
What I understand is you want to return a message when Employee is not found.
Try this
[HttpGet]
public async Task<ActionResult> Details(string firstName)
{
var empDetails = await _context.EmpDetails
.FirstOrDefaultAsync(m => m.FirstName == firstName);
if (empDetails == null)
{
return Content("Employee not found");
}
return View(empDetails);
}
In view extract the message from the response.
--Edit
You can do an Ajax call like below to this action method
<script type="text/javascript">
$(function () {
$("#btnGetDetails").click(function () {
$.ajax({
type: "GET",
url: "/Employee/Details",
data: '{firstName: "' + $("#txtSearch").val() + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
success call back will be triggered and the message will be available in the view. (Didn't test the script)
I have a jquery grid that has a list of Employee Records.To edit the records there is a link on each row.On click of that A jquery model popup opens and loads the partial view to show and edit the data.But on click of the button(custom button not the jquery model button) on the popup(that loads a partial view),the client side validation using dataAnnotation does not work. If I make a submit form like:-
$("#btnUpdate).submit(function (e) {
e.preventDefault();
var $form = $(this);
if ($form.valid()) {
//Add ajax call
}
});
Then after submit it redirects to:- { ../Employee/Edit/EmployeeId } where it shows a blank screen as I dont have any view for this.
I want that after the form post it should just refresh the jquery grid.
public PartialViewResult _CreateSupplier()
{
return PartialView(new Supplier());
}
[HttpPost]
public JsonResult _CreateSupplier(Supplier model)
{
//Validation
return Json(new
{
status = transactionStatus,
modelState = ModelState.GetModelErorrs()
}, JsonRequestBehavior.AllowGet);
}
Form post jquery method
$('#create-supplier').submit(function (e) {
e.preventDefault();
var $form = $(this);
if (!ModelIsValid($form))
return;
AjaxPost($form.serialize(), '#Url.Action("_CreateSupplier")', function (result) {
if (result.status == 0) {
$form[0].reset();
//Success
var grid = $("#gridSupplier").data("kendoGrid");
grid.dataSource.read();
} else if (result.status == 1)
AddFormErrors($form, result);
else if (result.status == 2)
//error;
});
});
Checking model method is valid and if invalid adding errors to form
function ModelIsValid(form) {
var validator = $(form).validate(); // obtain validator
var anyError = false;
form.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found
return true;
}
function AddFormErrors(form, errors) {
for (var i = 0; i < errors.modelState.length; i++) {
for (var j = 0; j < errors.modelState[i].errors.length; j++) {
var val = $(form).find("[data-valmsg-for='" + errors.modelState[i].key + "']");
if (val.html().length > 0) {
$(form).find("[for='" + errors.modelState[i].key + "']").html(errors.modelState[i].errors[j]);
} else {
val.html('<span for="' + errors.modelState[i].key + '" generated="true" class="" style="">' + errors.modelState[i].errors[j] + '</span>');
}
}
}
}
Ajax post method:
function AjaxPost(postData, url, callback) {
$.ajax({
url: url,
type: 'POST',
data: postData,
dataType: 'json',
success: function (result) {
if (callback) callback(result);
}
});
}
And last c# generic method which checks returns model state errors
public static IEnumerable<object> GetModelErorrs(this ModelStateDictionary modelState)
{
return modelState.Keys.Where(x => modelState[x].Errors.Count > 0)
.Select(x => new {
key = x,
errors = modelState[x].Errors.Select(y => y.ErrorMessage).ToArray()
});
}
Hope answer is useful...
So I got a ajax method that returns a JSON result, but part of the method is to check if the session is valid.
So If a user refreshed a page, the ajax method is called, in which it throws an exception as the session has expired, now the method wants to return a JSON result, but instead I want to redirect them to the login page.
how do I do this?
public JsonResult GetClients()
{
var usertoken = new UserToken(this.User.Identity.Name);
if (usertoken.AccountId != null)
{
return new JsonResult() {Data = model, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
}
else
{
//Redirect Here
}
AFAIK you would only be able to do this via JavaScript since your call is using ajax, the solution to the other post would not work since the redirect header would not be honored for an ajax request.
You might want to add a status or hasExpire property to your return result:
[HttpPost]
public ActionResult GetClients()
{
var usertoken = new UserToken(this.User.Identity.Name);
if (usertoken.AccountId != null)
{
return Json(new { data = model, status = true });
}
else
{
return Json(new { data = null, status = false });
}
On your ajax call:
$.ajax('/controller/getclients', { }, function(data) {
if(data.status == true) {
// same as before you've got your model in data.data...
} else {
document.location.href = '/account/login';
}
});
Hope that help.
In Controller code, check for session validity. For example
if (Session["UserName"] == null)
{
return Json(new
{
redirectUrl = ConfigurationManager.AppSettings["logOffUrl"].ToString(),
isTimeout = true
});
}
In .js file check like the following
success: function (data) {
if (data != '' && typeof data != 'undefined') {
if (data.isTimeout) {
window.location.href = data.redirectUrl;
return;
}
I am having two user control on a aspx page and one of the user control has a text area for notes. and i am trying to use JSON so that when they click the addnote button it does not reload the page.
Below is my java script , but it says that it is giving this error
The HTTP verb POST used to access path '/Documents/TestNote/Documents/AddNote' is not allowed.
<script type="text/javascript">
$(document).ready(function() {
$("#btnAddNote").click(function() {
alert("knock knock");
var gnote = getNotes();
//var notes = $("#txtNote").val();
if (gnote == null) {
alert("Note is null");
return;
}
$.post("Documents/AddNote", gnote, function(data) {
var msg = data.Msg;
$("#resultMsg").html(msg);
});
});
});
function getNotes() {
alert("I am in getNotes function");
var notes = $("#txtNote").val();
if (notes == "")
alert("notes is empty");
return (notes == "") ? null : { Note: notes };
}
</script>
My controller
[HttpPost]
public ActionResult AddNote(AdNote note)
{
string msg = string.Format("Note {0} added", note.Note);
return Json(new AdNote { Note = msg });
}
in the controller use
return Json(new AdNote { Note = msg },sonRequestBehavior.AllowGet);
I see two errors:
- var msg = data.Msg; should be var msg = data.Note;
- Use <%=Url.Action("AddNote","Documents")%> instead of "Documents\AddNote"