I expect to receive the value of the button to a.aaa
but i get null instead
a.aaa needs to be "stackOverflow" string in [HttpPost]
controller code
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Class1 a)
{
return View();
}
}
model
namespace WebApplication3.Models
{
public class Class1
{
public string aaa { get; set; }
}
}
view
#model WebApplication3.Models.Class1
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<button type="button" name="aaa" id="aaa" value="stackOverflow">pressMe</button>
<input type="submit" />
}
This works correctly for me. Set a breakpoint at the return View(); line in the ActionResult Index(Class1 a) method.
This should demonstrate that a contains a value of stackOverflow for it's property aaa.
If you cannot replicate this behavior, please clarify the behavior that you would expect.
What is [HttpPost] ?
You should find the value in Request["aaa"]
#using (Html.BeginForm("Index", "DefaultController ", FormMethod.Post))
{
<p>
#Html.TextBox("aaa", "stackOverflow")
<input type="submit" value="Text" />
</p>
}
This code should work for sure, you can try it !
I recommend implementing via javascript/ajax
In your html's body
Press Me
In your html's script
function myJsFunc(somedata) {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/DefaultController/Index',
data: { 'somedata' : somedata },
success: function(result) {
//do something
}
error: function (errorData) {alert(errorData);}
});
};
In your controller
[HttpPost]
public ActionResult Index(string somedata)
{
if(somedata == "aaa")
{
//do something
}
return Json("successData");
}
Then style links as buttons with css.
Or replace your buttons with inputs and follow these examples
Related
Using Core 3.1 and Razor Pages
I trying to undertake the simple task of passing a search string into a ViewComponent and invoke the results.
I have encountered two issue I cannot find help with:
How to pass the input search string to the view component?
How to invoke the view component when the search button is clicked?
_Layout Page
<input id="txt" type="text" />
<button type="submit">Search</button>
#await Component.InvokeAsync("Search", new { search = "" })
//Should equal input string
I am new to core so any nudges in the right direction would be appreciated.
View component is populated on server side and then return to your client for rendering, so you can't directly pass client side input value into view component . In your scenario , when clicking search button , you can use Ajax to call server side method to load the view component and pass the input value :
Index.cshtml
<input id="txt" type="text" />
<button onclick="loadcomponents()">Search</button>
<div id="viewcomponent"></div>
#section Scripts{
<script>
function loadcomponents() {
$.ajax({
url: '/?handler=Filter',
data: {
id: $("#txt").val()
}
})
.done(function (result) {
$("#viewcomponent").html(result);
});
}
</script>
}
Index.cshtml.cs
public IActionResult OnGetFilter(string id)
{
return ViewComponent("Users", new { id = id });
}
UsersViewComponent.cs
public class UsersViewComponent : ViewComponent
{
private IUserService _userService;
public UsersViewComponent(IUserService userService)
{
_userService = userService;
}
public async Task<IViewComponentResult> InvokeAsync(string id)
{
var users = await _userService.GetUsersAsync();
return View(users);
}
}
Edit: Oh, you edited the razor tag in after I posted my answer. Well, my answer is only valid for ASP.NET Core MVC.
I assume that your controller looks something like this:
[HttpGet]
public IActionResult Index()
{
var model = new IndexVM();
return View(model);
}
[HttpPost]
public IActionResult Index(IndexVM model)
{
// you can do something with the parameters from the models here, or some other stuff
return View(model);
}
Your ViewModel can look like this:
public class IndexVM
{
public string SearchTerm {get;set;}
}
Your View where you use your ViewComponent:
#model IndexVM
// <form tag ...
<input asp-for="SearchTerm" />
<button type="submit">Search</button>
#await Component.InvokeAsync(nameof(Search), Model)
ViewComponent:
public class Search : ViewComponent
{
public IViewComponentResult Invoke(IndexVM indexVM)
{
// Do something with indexVM.SearchTerm
}
}
View of ViewComponent:
#model IndexVM
// ...
I am trying to load a div data using ajax rather than whole view on post method.
but it returns object%20HTMLInputElement action name on post action.
Controller:
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(DemoCLass objdemo)
{
return View();
}
View
<div id="divEmp">
#using (Ajax.BeginForm("Index", "Challan", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
{
#Html.AntiForgeryToken()
<h3 style="text-align:center;" class="row header">Challan Data</h3>
#Html.Partial("_DateCommonFT")
}
It includes _Layout.cshtml where i have defined scripts as:
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
How to render only post action without loading whole page (_layout.cshtml) on post request using ajax.
Can you try to close your div tag and receive HtmlForgeryToken in controller like following.
you can also fill your target div with PartialView by returning PartialView() in Index method
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(DemoCLass objdemo)
{
return PartialView();
}
<div id="divEmp">
</div>
#using (Ajax.BeginForm("Index", "Challan", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
{
#Html.AntiForgeryToken()
<h3 style="text-align:center;" class="row header">Challan Data</h3>
#Html.Partial("_DateCommonFT")
}
please Ajax.Begin form you can use OnSuccess method.
In VIew:-
#using (Ajax.BeginForm("Index", "Challan", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp", OnSuccess = "AjaxForm" }))
{
}
In Script:-
here return json from post controller.
function AjaxForm(response){
.....do as uou want...
}
in Controller:-
[HttpPost]
public ActionResult Index(DemoCLass objdemo)
{
return json(new {IsSuccess = true},JsonRequestBehavior.AllowGet);
}
if you have any query in this one then tell to me
Use the PartialView method to return a view without the layout.
[HttpPost]
public ActionResult Index(DemoCLass objdemo)
{
return PartialView();
}
If you want to return the html without layout markup only for the ajax form submissions, you can check the request headers to see whether the request is an xhr request or not. Request.IsAjaxRequest() method will be handy here.
[HttpPost]
public ActionResult Index(DemoCLass objdemo)
{
if (Request.IsAjaxRequest())
{
return PartialView();
}
else
{
return View();
}
}
Situation: In my C#/MVC 4 solution I am employing a view with a partial view within. The view is a form with a submit button. The partial view is with a div that is hidden, but can be displayed if the checkbox is selected.
Issue: If the partial view is hidden, the submit works normally. If the partial view is not hidden the submit causes the page to become unresponsive, if one waits the 3 plus minutes or so the submit eventually works as expected.
The code is below. Thank you in advance for your consideration. I am a novice developer, therefore all comments, suggestions and critiques are welcome.
Code:
Model
namespace MyModels
{
public class MainModel
{
public SelectListItem Things { get; set;}
public IEnumerable<OtherModel> MoreThings { get; set;}
}
}
View
//named MyView
#model MyModels.MainModel
#using MyModels
#if (Model != null){
using (Html.BeginForm("MyViewName", "MyControllerName", FormMethod.Post, new { id = "view-form" }))
{
#Html.LabelFor(model => model.things)
#Html.DropDownList("", (Selectist)ViewBag.things)
#Html.ValidationMessageFor(model => model.field1)
#Html.CheckBoxWithLabel("aNameAttribute", Model.valueAttribute.ToString(), "anIdAttribute", Model.valueAtttribue ==1, "aLabel", "a_Toggle_Class")
<div class="treeview" style="display: none;">
<fieldset>
<legend>Title</legend>
//view causing issues replaces the div below
<div id="replacedDiv"></div>
</fieldset>
</div>
<p>
<input type="submit" value="Submit" />
</p>
}
}
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "/MyController/MyPartialView",
contentType: "application/html; charset=utf-8",
cache: "false",
type: "GET",
datatype: "html"
})
.success(function (result) {
$('#replacedDiv").html(result);
})
});
</script>
Partial View
//named _MyPartialView
#model MyModels.MainModel
#using MyModels
#foreach (var moreThings in ViewBag.moreThings)
{
<div id="replacedDiv">
<label>
<input type="checkbox" id=#moreThings.id value=#moreThings.name />#moreThings.name </label>
</div>
}
Controller
namespace Main.Controllers
{
public class MyController
{
[HttpGet]
public ActionResult Index(MainModel model)
{
return View(model);
}
public ActionResult MyView()
{
var model = new MainModel();
return View(model);
}
public ActionResult MyPartialView(MainModel model)
{
<OtherModel> moreThings = BLotherModel.GetMoreThings();
ViewBag.moreThings = moreThings;
return PartialView("_MyPartialView", promotion);
}
[HttpPost]
public ActionResult MyView(FormCollection collection)
{
MainModel model = new MainModel();
return SaveModel(model);
}
}
}
In your ajax you are using:
$('#replacedDiv").html(result);
But your partial view contains <div id="replacedDiv"> that are generated in a loop
replace your partial view code with :
#foreach (var moreThings in ViewBag.moreThings)
{
<label>#moreThings.name </label>
<input type="checkbox" id=#moreThings.id value=#moreThings.name />
}
and it should be OK
I am using ASP.net MVC 4 with the Razor engine.
I have a page (Index.cshtml) and a controller (HomeController.cs)
I am trying to hook up my submit button to an Action Result in my controller - however i can't seem to get it to fire.
My HTML :
#using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{
<div class="main-Background">
******lots of other html here*******
<button type="submit" id="btnSave">Save</button>
</div>
}
My Controller :
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
[HttpPost]
public ActionResult SubmitForm()
{
return View();
}
}
At the moment i havn't implemented a model to pass the values through to the controller, i just wanted to see if i could get the ActionResult SubmitForm to fire.
I have tried #using (Html.BeginForm()) with no parameters, i have also tried including [HttpPost] above my ActionResult, without any luck.
Edit i have also tried using <input type="submit" id="btnSave">Save</input> instead of a button.
Not sure where i am going wrong
It turns out that jQuery was stopping the ActionResult from being hit.
I had a button click event which was "eating up" the ActionResult functionality. I solved this by calling my ActionResult using Ajax.
You dont need to use "-Controller" suffix. Use just Home instead of HomeController, MVC will convert it for you.
Use
#using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post, new { id = "submitForm" }))
instead of
#using (Html.BeginForm("SubmitForm", "HomeController", FormMethod.Post, new { id = "submitForm" }))
Full codes
view
#using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post, new { id = "submitForm" }))
{
<div class="main-Background">
******lots of other html here*******
<input type="submit" id="btnSave">Save</input>
</div>
}
And controller
[HttpPost]
public ActionResult SubmitForm()
{
return View();
}
View:
#using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{
<div class="main-Background">
******lots of other html here*******
<button type="submit" id="btnSave">Save</button>
</div>
}
Controller:
[HttpPost]
public ActionResult SubmitForm()
{
return View();
}
May be the problem is occurred because of other HTML inside your div so check it out. Otherwise it works perfectly.
You need to add Html.BeginForm with the parameters. Here is an example:
ActionName – Name of the Action. In this case the name is Create.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
http://localhost:60386//Home/Create
#using (Html.BeginForm("Create", "Home", FormMethod.Post))
{
#Html.EditorFor(model => model.FirstName)
<input type="submit" value="Create"/>
}
HomeController.cs:
[HttpPost]
public ActionResult Create(Person person)
{
if (ModelState.IsValid)
{
db.Persons.Add(person);
db.SaveChanges();
return RedirectToAction("Create");
}
return View(person);
}
TL;DR
I had [Required] data attributes on my view model preventing the submit from working when the form wasn't filled.
I had two submit buttons in my MVC code, one for Submit, the other for Cancel.
Both buttons were firing correctly on data entry, but neither when nothing was entered.
It took me a bit to realize that my view model had [Required] field validations in place!
View:
#using (Html.BeginForm(actionName: "Index", controllerName: "User", method: FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.TextBoxFor(m => m.PhoneNumber)
...
<input type="submit" name="submitAction" value="Verify" />
<input type="submit" name="submitAction" value="Cancel" />
}
ViewModel:
public class UserViewModel
{
[Required]
[MaxLength(10)]
public string PhoneNumber { get; set; }
[Required]
...
}
Controller Method:
[HttpPost]
[ValidateAntiForgeryToken()]
public ActionResult Index(UserViewModel viewModel, string submitAction)
{
switch(submitAction)
{
case "Verify": ...
case "Cancel": ...
}
}
Change this #using (Html.BeginForm("SubmitForm", "HomeController", FormMethod.Post, new { id = "submitForm" }))
to
#using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post, new { id = "submitForm" }))
Explanation : No need to suffix Controller anywhere, it being accepted by default
and in the Controller
[HttpPost]
public ActionResult SubmitForm(string id)
{
return View();
}
Explanation : as the Form Method given by you is Post so need to include [HttpPost] before the Action and the parameter you were passing was missing in the action method
I have a simple controller and view:
I just want the Index.cshtml view page to be reloaded with new data.I have debugged the code thoroughly. Infact, clicking on the "ul" when the control goes to the Index(string value) method the model object is populated with new data and even in the cshtml page the Model is showing the new list in the debugger, but the view is NOT getting refreshed. I really don't know why.. Can anyone help me plz?
If I have gone wrong horribly somewhere please excuse my ignorance as I am new to MVC.
Thanks in advance...
Controller:
namespace MVCTestApp1.Controllers
{
public class TestController : Controller
{
//
// GET: /Test/
public ActionResult Index()
{
ModelState.Clear();
List<string> ll = new List<string>();
ll.Add("qq");
ll.Add("aa");
ll.Add("zz");
return View(ll);
}
[HttpPost]
public ActionResult Index(string value)
{
ModelState.Clear();
List<string> ll = new List<string>();
ll.Add("kkk");
ll.Add("qq");
ll.Add("aa");
ll.Add("zz");
return View(ll);
}
}
}
View:
#model IEnumerable<string>
#{
ViewBag.Title = "Index";
}
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<h2>Index</h2>
<ul id="bb">
#foreach (var i in Model)
{
<li>#Html.DisplayFor(ir=>i)</li>
}
</ul>
}
I suppose that you wrote some javascript code so that when the user clicks on a <li> element of the <ul> you are triggering an AJAX call to the [HttpPost] action sending the selected value to the server. The problem with your code might be that you probably forgot to update the DOM with the new contents in your success callback. So for this to work you could start by placing the <ul> contents in a partial view:
List.cshtml:
#model IEnumerable<string>
#foreach (var i in Model)
{
<li>#Html.DisplayFor(ir=>i)</li>
}
and then include this partial in the main view:
#model IEnumerable<string>
#{
ViewBag.Title = "Index";
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<h2>Index</h2>
<ul id="bb">
#Html.Partial("_List", Model)
</ul>
}
OK, now in your POST action you could return the partial:
[HttpPost]
public ActionResult Index(string value)
{
List<string> ll = new List<string>();
ll.Add("kkk");
ll.Add("qq");
ll.Add("aa");
ll.Add("zz");
return PartialView("_List", ll);
}
and the final bit is the javascript code:
$(function() {
$('#bb').on('click', 'li', function() {
var value = $(this).html();
$.ajax({
url: $(this).closest('form').attr('action'),
type: 'POST',
data: { value: value },
success: function(partialView) {
$('#bb').html(partialView);
}
});
});
});