I am using an ajax.beginform to create a partial view within another view.
I the user enters a correct sn everything works fine.
But if the user enters an invalid number, I want to redirect to the index view.
Now the index page is submitted as a partial view in itself.
How can I avoid that.
Here is a part of my view and 2 simplified actionresults.
#using (Ajax.BeginForm("MachineInfo", "QrCreate", new AjaxOptions() {
HttpMethod = "POST", UpdateTargetId = "form-content", InsertionMode =
InsertionMode.ReplaceWith }))
{
#Html.AntiForgeryToken()
<input type="text" id="sn" name="sn" class="inputsn"
placeholder="Enter your serial number here..." />
<input type="submit" value="Search" class="search btn btn-success btn-lg" />
}
</div>
</div>
<div id="form-content"></div>
my Controller
public ActionResult Index(bool? isValidMachine = null)
{
ViewBag.invalidSerialNumber = isValidMachine;
return View();
}
[HttpPost]
public ActionResult MachineInfo(string sn)
{
if(string.IsNullOrEmpty(sn))
RedirectToAction("Index", new { isValidMachine = false });
QrCreateViewModel qrCreateVM;
using (var machineService = new MachineApiService())
{
var machine = machineService.GetMachineFromSerialNumber(sn);
if (machine == null)
return RedirectToAction("Index", new { isValidMachine = false });
else
qrCreateVM = new QrCreateViewModel(machine, GetBasePath());
}
if (qrCreateVM.IsValid())
{
qrCreateVM.Viewurl = qrCreateVM.QrCreateUrlOrDefaultNull();
return PartialView(qrCreateVM);
}
else
return RedirectToAction("Index", new { isValidMachine = false });
}
Ajax calls do not redirect (the purpose of making them is to stay on the same page).
In your controller method, replace the instances of return RedirectToAction(...) to return a HttpStatusCodeResult indicating an error, which you can then handle in the OnFailure option to redirect to the Index() method.
For example
[HttpPost]
public ActionResult MachineInfo(string sn)
{
if (string.IsNullOrEmpty(sn))
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Bad Request");
}
....
Then in the Ajax.BeginForm()
#using (Ajax.BeginForm("MachineInfo", "QrCreate", new AjaxOptions() {
HttpMethod = "POST",
UpdateTargetId = "form-content",
InsertionMode = InsertionMode.ReplaceWith,
OnFailure = "redirect"
}))
{
....
and add the following script to redirect
function redirect(ajaxContext) {
location.href = '#Url.Action("Index")';
}
Related
I received error saying:
HTTP 404. The resource you are looking for (or one of its
dependencies) could have been removed, had its name changed, or is
temporarily unavailable. Please review the following URL and make
sure that it is spelled correctly. Requested URL:
/PCController/Progress
PCController is my controller's name.
This is from my controller:
[HttpGet]
public ActionResult Progress()
{
return View();
}
[HttpPost]
public ActionResult Progress(HttpPostedFile file)
{
try
{
if (file.ContentLength > 0)
{
string _FileName = Path.GetFileName(file.FileName);
string _path = Path.Combine(Server.MapPath("~/Content/PC"), _FileName);
file.SaveAs(_path);
}
ViewBag.Message = "File Uploaded Successfully!!";
return View();
}
catch
{
ViewBag.Message = "File upload failed!!";
return View();
}
}
And this one is for my View:
#using (Html.BeginForm("Progress", "PCController", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div>
#Html.TextBox("file", "", new { type = "file" }) <br />
<input type="submit" value="Upload" />
#ViewBag.Message
</div>
}
I shouldnt put Controller there, should be "PC" instead.
#using (Html.BeginForm("Progress", "PC", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.TextBox("file", "", new { type = "file" })
<input type="submit" value="Upload" />
#ViewBag.Message
</div>
}
When I click submit, the page is refreshed and looks like everything went through, but is not hitting the ActionResult I am trying to send it to.
I've tried submitting normally and with JavaScript and neither will work.
<form method="post" autocomplete="off" asp-controller="Default" asp-action="Submit">
<button id="SubmitButton" type="submit">Submit</button>
</form>
Controller Method:
namespace (Removed).Controllers
{
public class DefaultController : Controller
{
[HttpPost]
public ActionResult Submit()
{
DBController1 DB1 = new DBController1();
AlertManagement am = new AlertManagement();
am.FirstName = Request.Form["FirstName"];
am.LastName = Request.Form["LastName"];
am.Email = Request.Form["EmailAddress"];
am.Mobile = Request.Form["PhoneNumber"].Replace("(", "").Replace(")", "").Replace(" ", "").Replace("-", "");
am.Affiliation = Request.Form["Affiliation"];
am.StartDate = Convert.ToDateTime(Request.Form["StartDate"]).Date;
am.EndDate = Convert.ToDateTime(Request.Form["EndDate"]).Date;
DB1.AlertManagement.Add(am);
DB1.SaveChanges();
return RedirectToAction("Index");
}
public ActionResult Index()
{
return View();
}
}
}
Here is the RouteConfig:
namespace (Removed)
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Index",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Default", action = "Index", id = UrlParameter.Optional }
);
routes.MapRoute(
name: "Submit",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Default", action = "Submit", id = UrlParameter.Optional }
);
}
}
}
When I click submit, it always goes to ActionResult Index()
Taking a shot in the dark here, but does your controller look like this?
public class DefaultController: Controller
{
[HttpPost] // This attribute states that this action result can only be accessed when using http POST verb.
public IActionResult Submit()
{
return RedirectToAction("index", "home");
}
}
Also, what are you posting? If you have intentionally left out the fields in your example make sure that in your POST method you have this.
<form method="post" autocomplete="off" asp-controller="Default" asp-action="Submit">
<input type="text" name="nameOfElement" id="clientName" />
<button id="SubmitButton" type="submit">Submit</button>
</form>
public class DefaultController: Controller
{
[HttpPost]
public IActionResult Submit([FromForm] string nameOfElement)
{
return RedirectToAction("index", "home");
}
}
try this
<form action="/Default/Submit" method="post">
<input type="submit">
</form>
the ActionMethod you are expecting to be called is of Verb 'GET' while your Form submit method type is 'POST'
add HttpPost attribute it shouls work
[HttpPost]
Public ActionResult Submit()
{
}
Login.cshtml
<script type="text/javascript">
function data() {
var n = document.getElementById("username").value;
var m = document.getElementById("password").value;
?
</script>
<button type="submit"class="btn-login" onClick="Data()">
Giriş Yap </button>
Account Controller
DBEntities dB = new DBEntities();
[HttpPost] (username) (password)
public ActionResult Login(string KullaniciAdi,string Sifre)
{
// Session[KullaniciAdi] = dB.Profil.Where(x => x.KullaniciAdi == KullaniciAdi && x.Sifre == Sifre).FirstOrDefault();
var session = (from p in dB.Profil
where p.KullaniciAdi == KullaniciAdi
select p).FirstOrDefault();
return View();
}
My OOP homework is this website and i want to create a login with sending password and username to controller and compare submitted data and the data in the database .Please help :)
You can send client data by using ajax request,
this is your inputs
<input id="username" type="text" />
<input id="password" type="password" />
<input id="loginbutton" onclick="UserLogin()" type="submit" value="Submit" />
Submit button bind with UserLogin js function.
here is the js function. we are sending ajax post request here to our controller
<script type="text/javascript">
function UserLogin() {
var n = document.getElementById("username").value;
var p = document.getElementById("password").value;
var postObj = JSON.stringify({
"username": n,
"password": p
});
$.ajax({
url: "/Home/Login", // endpoint
type: "POST",
data: postObj,
contentType: "application/json; charset=utf-8",
success: function (result) {
// success
},
error: function (errorData) { onError(errorData); }
});
}
</script>
And your controller should be like, you can implement login logic inside of the method.
[HttpPost]
public ActionResult Login(string username, string password)
{
// use your code loged in
return Json(true, JsonRequestBehavior.AllowGet);
}
First You Create a Class :
public class LoginModel
{
[Required(ErrorMessage = "User Name can not be empty!")]
public string LOGINID { get; set; }
[Required(ErrorMessage = "Password can not be empty!")]
public string LOGINPW { get; set; }
}
Then Your Controller Action Method do this:
public ActionResult Login()
{
return View();
}
[HttpPost]
public ActionResult Login(LoginModel model)
{
//Here check the Login Id and Password
return View();
}
Now in view Write this. Now when you click the submit button a post call go to the Login Controller with given LOGINID and LOGINPW :
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<!-- login screen -->
<form action="#">
#Html.TextBoxFor(m => m.LOGINID, htmlAttributes: new { #class = "form-control", placeholder = "Login ID" })
#Html.ValidationMessageFor(model => model.LOGINID, "", new { #class = "text-danger", style = "float: left" })
#Html.PasswordFor(m => m.LOGINPW, htmlAttributes: new { #class = "form-control", placeholder = "Password" })
#Html.ValidationMessageFor(model => model.LOGINPW, "", new { #class = "text-danger", style = "float: left" })
<button type="submit" class="btn btn-primary" style="background: #2e6da4; color: #FFF;">Login</button>
</form>
}
#{
var actionURL = Url.Action("Action", "Controller",
FormMethod.Post, Request.Url.Scheme)
+ Request.Url.PathAndQuery;
}
#using (Html.BeginForm("Action", "Controller", FormMethod.Post,
new { #action = actionURL }))
{
<input type="text" name="username">
<input type="text" name="password">
<button type="submit"class="btn-login"></button>
}//Then use Request.Form[0] with the id to get the user name and password in the controller action.
let's suppose I have a form like this:
#using (Ajax.BeginForm("ChangePassword", "User", new { area = "UserSettings" }, new
AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "ShowMessage('Password successfully changed')"
}, null))
{
#Html.TextBoxFor(m => m.Password, new { placeholder = "Password", #class = "form-control", #type = "password" })<br />
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger", #style = "float:right;" })
#Html.TextBoxFor(m => m.PasswordConfirm, new { placeholder = "Confirm password", #class = "form-control", #type = "password" })<br />
#Html.ValidationMessageFor(model => model.PasswordConfirm, "", new { #class = "text-danger", #style = "float:right;" })
<button type="submit" class="btn btn-primary">Change Password</button>
}
Essentially it's a form to change a password with validation setup in place.
Now my Question here is, in the case where I have an action like this:
[HttpPost]
[ActionName("ChangePassword")]
public ActionResult ChangePassword(MyObjectClass model)
{
if(!ModelState.IsValid)
{
return View(model);
}
else{
ViewBag.MyData = // some data here;
return View();
}
}
The questions that I have are:
When I return a View with all data in it, how do I actually then inject that returned data into the user's DOM that the user can see the changes reflected when OnSuccess method is called? Where is the "data" object that I can inject into like in done function in jQuery( .done(function(data)))?
What is the easiest way here to transfer now all the data from my controller action into the OnSuccess method and actually let the user see the outcome of the method that they called?
Can someone help me out with this ? What is the best way to solve this issue ?
I used to work with pure jQuery before and I Was doing this in this manner:
$.post("/linktomymethod",{/*some parameters*/).done(function(data){
// then inject the returned data into the browser's DOM
}));
If you want to use #Ajax.BeginForm(), then you specify the UpdateTargetId property of AjaxOptions, for example
<div id="changepassword">
#using (Ajax.BeginForm(..., new AjaxOptions { UpdateTargetId = "changepassword" }, null))
{
....
}
<div>
which would replace your <form> element with the view returned by your ChangePassword() method. Note also that your should be returning a PartialView.
However, you should stick with the $.ajax() methods as these give you far more flexibility. Typically you handle the forms .submit() event, check the .valid() method (and cancel the ajax call if not so client side validation messages are displayed), and then update the DOM with the partial view that the method returns.
Replace your #using (Ajax.BeginForm(..) { code with a simple
<div id="changepassword">
#using (Html.BeginForm()) {
....
and add the following script
var url = '#Url.Action("ChangePassword", "User", new { area = "UserSettings" })';
$('form').submit(function (ev) {
ev.preventDefault(); // prevent the default submit
if (!$(this).valid()) { // check if the data is valid
return; // exit the function
}
var formdata = $(this).serialize();`
$.post(url, formdata, function(response) {
$('changepassword').html(response);
});
});
To improve performance further, your could just return a JsonResult containing the invalid properties and their associated error, and update the placeholder elements generated by #Html.ValidationMessageFor(). You controller code would be
if (!ModelState.IsValid)
{
var errors = ModelState.Keys.Where(k => ModelState[k].Errors.Count > 0).Select(k => new { propertyName = k, errorMessage = ModelState[k].Errors[0].ErrorMessage });
return Json(errors);
}
// Save data
return Json(null);
In the success callback, you can then loop through the collection, find the corresponding ValidationMessageFor() placeholder based on the property name, and add the error message and appropriate class names.
Below is code I found online sometime back. It refreshes section of form based on link click. I want to change this to have links in a DropDownList. Then based on its selection and a button click I want to perform the same action as link click.
I am having hard time figuring out how to read dropdownlist selected value. I tried searching here on SO, but not finding any simple example. Looks like most of them are based on javascript. I am hoping that there must be some simple solution without using javascript.
Controller
namespace WebApplication2.Controllers
{
public class HomeController : Controller {
DBEntities db = new DBEntities();
// GET: /AllUsers/
public ActionResult Index()
{
return View();
}
// Return all students
public PartialViewResult All()
{
List<AspNetUser> model = db.AspNetUsers.ToList();
return PartialView("_Users", model);
}
// Return Top3 students
public PartialViewResult Top3()
{
List<AspNetUser> model = db.AspNetUsers.OrderByDescending(x => x.UserName).Take(3).ToList();
return PartialView("_Users", model);
}
}
}
Partial View
#model IEnumerable<WebApplication2.Models.AspNetUser>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th>
#Html.DisplayNameFor(model => model.PhoneNumber)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.PhoneNumber)
</td>
</tr>
}
</table>
View
#{
ViewBag.Title = "Home Page";
}
<div style="font-family:Arial">
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<h2>Students</h2>
#Ajax.ActionLink("All", "All",
new AjaxOptions
{
HttpMethod = "GET", UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace
})
<span style="color:Blue">|</span>
#Ajax.ActionLink("Top 3", "Top3",
new AjaxOptions
{
HttpMethod = "GET", UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace
} )
<br /><br />
<div id="divStudents" style="height: 600px; overflow: auto;"></div>
</div>
You need to replace you Ajax.ActionLink()'s with a single Ajax.BeginForm() containing the dropdownlist
#model StudentSearchVM
<h2>Students</h2>
#using (Ajax.BeginForm("Filter", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace }))
{
#Html.DropDownListFor(m => m.Filter, Model.FilterList)
<input type="submit" value="Search" />
}
<div id="divStudents" style="height: 600px; overflow: auto;"></div>
Note the above assumes you have the following view model
public class StudentSearchVM
{
public string Filter { get; set; }
public SelectList FilterList { get; set; }
}
And that in the GET method that generate this view
StudentSearchVM model = new StudentSearchVM
{
FilterList = new SelectList(new List<string>(){ "All", "Top 3" })
}
return View(model);
Then you would have a single controller method
public ActionResult Filter(string filter)
{
if (filter == "All")
{
List<AspNetUser> model = db.AspNetUsers.ToList();
return PartialView("_Users", model);
}
else
{
....
}
}