I'm developing ASP.NET MVC5 project with boostrap, jquery, jquery UI. Submit is working fine but FormCollection in create Action is arriving empty in HomeController. I don't know what I'm doing wrong or is missing. PLease need help. Below snippet code.
Index.cshtml:
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Empleado</h4>
</div>
<div class="modal-body">
#using (Ajax.BeginForm("Create", "Home", new AjaxOptions() { HttpMethod = "post" }, new { id = "dialog", name = "dialog" }))
{
<div class="panel">
<div class="panel-body">
<div class="form-group">
<label class="control-label">Nombres</label>
<input type="text" class="form-control" id="modalNombres" placeholder="Nombres" />
</div>
<div class="form-group">
<label class="control-label">Apellidos</label>
<input type="text" class="form-control" id="modalApellidos" placeholder="Apellidos" />
</div>
<div class="form-group">
<label class="control-label">Fecha de Nacimiento</label>
<input type="text" class="form-control" id="modalFechaNacimiento" placeholder="Fecha Nacimiento" />
</div>
<div class="form-group">
<label class="control-label">Tipo Documento</label>
<select class="form-control" id="modalTipoDocumento">
<option class="placeholder" selected disabled value="">--- Seleccione ---</option>
#foreach (var item in ViewBag.TiposDocumento)
{
<option value="#item.Id">#item.Descripcion</option>
}
</select>
</div>
<div class="form-group">
<label class="control-label">Número de Documento</label>
<input type="text" class="form-control" id="modalNumeroDocumento" placeholder="Número Documento" />
</div>
</div>
<div class="panel-footer">
<button type="button" role="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" role="button" class="btn btn-primary" id="btnGrabar">Grabar</button>
</div>
</div>
}
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
HomeController is:
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
string nombres = collection["modalNombres"];
return RedirectToAction("Index");
}
catch
{
return View();
}
}
None of you <input> elements have name attributes so there is nothing sent to the server. Change
<input type="text" class="form-control" id="modalNombres" placeholder="Nombres" />
to
<input type="text" class="form-control" name="modalNombres" placeholder="Nombres" />
There is no need for id attributes unless you using javascript/jquery to refer to them.
However, I very strongly recommend you go to the MVC site and work through some basic tutorials and learn how to generate a view in MVC. You should have a model, use the strongly typed html helpers to bind to the properties of your model, and the POST method should have a parameter for the model so it is bound (you should never use FormCollection in MVC)
Note also, you using Ajax.BeginForm() which uses ajax to post the form values so return RedirectToAction("Index"); in your POST method is pointless. Ajax calls stay on the same page, they do not redirect.
Related
I am creating an ASP.NET Core 6 MVC application, the application runs successfully but whenever I want to add an actor (based on project) the create view page does not work. It's showing an internal server error.
This is the error I get:
AspNetCoreGeneratedDocument.Views_Actors_Create.ExecuteAsync() in Create.cshtml
#model Actor
#{
ViewData["Title"] = "Add New Actor";
}
<div class="row text">
<div class="col-md-8 offset-2">
<p>
<h1>Add New Actor</h1>
The error is being highlighted on the ViewData line.
My create.cshtml
#model Actor
#{
ViewData["Title"] = "Add New Actor";
}
<div class="row text">
<div class="col-md-8 offset-2">
<p>
<h1>Add New Actor</h1>
</p>
<div class="row">
<div class="col-md-8 offset-2">
<form class="row" asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="mb-3">
<label asp-for="ProfilePictureURL" class="form-label"></label>
<input asp-for="ProfilePictureURL" type="text" class="form-control"/>
<span asp-validation-for="ProfilePictureURL" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="FullName" class="form-label"></label>
<input asp-for="FullName" type="text" class="form-control"/>
<span asp-validation-for="FullName" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="Bio" class="form-label"></label>
<input asp-for="Bio" type="text" class="form-control"/>
<span asp-validation-for="Bio" class="text-danger"></span>
</div>
<div class="mb-3">
<input type="submit" value="Create" class="btn btn-outline-success float-end"/>
<a class="btn btn-outline-secondary" asp-action="Index"> Show All</a>
</div>
</form>
</div>
</div>
</div>
</div>
This is my ActorsController.cs:
using eTickets.Data;
using eTickets.Data.Services;
using Microsoft.AspNetCore.Mvc;
namespace eTickets.Controllers
{
public class ActorsController : Controller
{
private readonly IActorsService _service;
public ActorsController(IActorsService service)
{
_service = service;
}
public async Task<IActionResult> Index()
{
IEnumerable<Models.Actor>? data = await _service.GetAll();
return View(data);
}
public IActionResult Create()
{
return View();
}
}
}
I am using .NET 6 and Visual Studio version 17.2.5.
What could be the problem? Thanks in advance
I want to use the same form to perform two different operations, and hide and display part of the form on a condition. Let's say if the text of the submit button is "SAVE" admissionNumber input field will not display but if the button text of the submit button is "UPDATE" admissionNumber input field will display. Below is the code sample
registerForm.html the same for being used to register and update student information
<div layout:fragment="content" class="container mySpace">
<form method="post" th:object="${student}" th:action="#{/register}">
<div class="card cardspace">
<h5 class="card-header" th:text="${chead}"></h5>
<div class="card card-body">
<div class="form-row">
<div class="col-9">
<div class="row">
i want to be able hide admissionNumber field if the btname is save and display it if the btname changes to update
<div class="form-group col" th:if="${btnname} == 'Submit'">
<label for="admissionNumber">Admission Number</label> <input
type="text" class="form-control" id="admissionNumber"
th:field="*{admissionNumber}">
<div class="text text-danger"
th:if="${#fields.hasErrors('admissionNumber')}"
th:errors="*{admissionNumber}"></div>
</div>
<div class="form-group col" th:unless="${btnname} == 'Update'">
<label for="admissionNumber">Admission Number</label> <input
type="text" class="form-control" id="admissionNumber"
th:field="*{admissionNumber}">
<div class="text text-danger"
th:if="${#fields.hasErrors('admissionNumber')}"
th:errors="*{admissionNumber}"></div>
</div>
<div class="form-group col">
<label for="firstName">First Name</label> <input type="text"
class="form-control" id="firstName" th:field="*{firstName}">
<div class="text text-danger"
th:if="${#fields.hasErrors('firstName')}"
th:errors="*{firstName}"></div>
</div>
<div class="form-group col">
<label for="lastName">Last Name</label> <input type="text"
class="form-control" id="lastName" th:field="*{lastName}">
<div class="text text-danger"
th:if="${#fields.hasErrors('lastName')}"
th:errors="*{lastName}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" th:text="${btnname}"></button>
</form>
student controller class
#Controller
public class StudentController {
#Autowired
private StudentServices studentServices;
displays the registration form
#GetMapping("/register")
public String showStudentRegistrationForm(Model model ) {
model.addAttribute("student", new Student());
model.addAttribute("chead", "Student Enrollment");// for card-header title h5 tag
model.addAttribute("btnname", "Submit"); // for button text
return "views/studentRegistrationForm";
}
displays the edit or update form
#GetMapping("/editStudent")
public String showStudentRegistrationEditForm(Model model ) {
model.addAttribute("student", new Student());
model.addAttribute("chead", "Edit Student Enrollment");
model.addAttribute("btnname", "Update");
return "views/studentRegistrationForm";
}
}
what you want is th:if tag, you got it almost right but whole wxpression needs to be in brackets th:if="${btnname == 'Submit'}"
I am new to ASP.NET Core MVC but I do have some experience working with ASP.NET webforms. I am creating an ASP.NET Core MVC project for practice in this I have a controller which has [http post] Create and Http Get Create action methods.
When user is on the Create page after entering the data user can click the submit button and once the data is saved, the view for http post Create() is render (reloading same view) and I am trying to show the data that user has filled prior to submit but data is not binding to the input controls. I am passing the same model to the view which was sent to be saved. During the debug and I am able to see the expected value under the Locals window in Visual Studio.
I want to understand what I am doing wrong or what changes I should be doing in order to work. If I need to take the different approach then why this the approach (mentioned below in code) I am taking is not correct?
Below is the code and explanation in the comments.
[HttpGet]
public async Task<IActionResult> Create()
{
// I am creating a viewModel object because wanted to include the logic for List<users> for dropdown.
var createView = await _chloramine.ChloramineSaveViewModel();
return View(createView);
}
[HttpPost]
// At page submit this Action method is called and data is saved.
public async Task<IActionResult> Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
{
_chloramine.CreateChloramineLog(clEditSaveViewModel);
// After data is saved I am adding a user list to the model because I was getting Object null error.
clEditSaveViewModel.User = await _chloramine.GetUser();
// Passing the same model object which was received in order to show what was filled or selected by the user.
return View(clEditSaveViewModel);
}
Below is the Create view html.
#model EquipmentMVC.Models.ChloramineLogEditSaveViewModel
#{
ViewData["Title"] = "Create";
}
<hr />
<div>
<form asp-action="Create">
<div class="form-group row">
#foreach (var item in Model.User)
{
#Html.HiddenFor(model => item)
}
<label asp-for="TimeDue" class="col-sm-2 col-form-label control-label"></label>
<div class="col-sm-8">
<input asp-for="TimeDue" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="PostPrimaryCarbanTankTp1" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="PostPrimaryCarbanTankTp1" />
</label>
</div>
</div>
</div>
<div class="form-group row">
<label asp-for="Comments" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input asp-for="Comments" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="IsCompleted" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" asp-for="IsCompleted" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Technician</label>
<div class="col-sm-8">
<select asp-for="Selected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
#*<span asp-validation-for="Selected" class="text-danger"></span>*#
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">RN</label>
<div class="col-sm-8">
<select asp-for="RnSelected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" value="Create" class="btn btn-secondary" />
</div>
</div>
<div><span asp-validation-for="TimeDue" class="text-danger"></span></div>
<div><span asp-validation-for="Comments" class="text-danger"></span></div>
<div><span asp-validation-for="IsCompleted" class="text-danger"></span></div>
</form>
</div>
I tested your code and found that it runs very well in my project.
Except for TimeDue, the field is not successfully bound, the rest of the fields are bound successfully.
I don’t know if you have the same problem. The TimeDue is not successful binding is because you set the Value in the view.
Please delete the value in this field in the view:
<input asp-for="TimeDue" class="form-control" />
Result:
By the way,your User is null only because your User is not successfully bound, you can modify your loop code as follows:
#for (int i = 0; i < Model.User.Count(); i++)
{
<input type="hidden" name="User[#i].Id" value=#Model.User[i].Id />
<input type="hidden" name="User[#i].Name" value=#Model.User[i].Name />
}
Then in your Create action:
[HttpPost]
public IActionResult Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
{
return View(clEditSaveViewModel);
}
Result:
Edit:
My codes:
Controller:
public IActionResult Create()
{
var model = new ChloramineLogEditSaveViewModel
{
Id = 1,
Comments = "aaaa",
PostPrimaryCarbanTankTp1 = "fjsdgk",
TimeDue = "bbbbbb",
IsCompleted=true,
RnSelected="gggg",
Selected="sgs",
User=new List<User>
{
new User{
Id=1,
Name="aa"
},
new User
{
Id=2,
Name="bb"
}
}
};
return View(model);
}
[HttpPost]
public IActionResult Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
{
return View(clEditSaveViewModel);
}
View:
<form asp-action="Create">
<div class="form-group row">
#for (int i = 0; i < Model.User.Count(); i++)
{
<input type="hidden" name="User[#i].Id" value=#Model.User[i].Id />
<input type="hidden" name="User[#i].Name" value=#Model.User[i].Name />
}
<label asp-for="TimeDue" class="col-sm-2 col-form-label control-label"></label>
<div class="col-sm-8">
<input asp-for="TimeDue" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="PostPrimaryCarbanTankTp1" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="PostPrimaryCarbanTankTp1" />
</label>
</div>
</div>
</div>
<div class="form-group row">
<label asp-for="Comments" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input asp-for="Comments" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="IsCompleted" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" asp-for="IsCompleted" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Technician</label>
<div class="col-sm-8">
<select asp-for="Selected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">RN</label>
<div class="col-sm-8">
<select asp-for="RnSelected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" value="Create" class="btn btn-secondary" />
</div>
</div>
<div><span asp-validation-for="TimeDue" class="text-danger"></span></div>
<div><span asp-validation-for="Comments" class="text-danger"></span></div>
<div><span asp-validation-for="IsCompleted" class="text-danger"></span></div>
</form>
I have created 2 partial views called _ftpsetupDetails.cshtml and _ftpsetupedit.cshtml
On load of the index page i am loading details partial view onto the below div.
now the problem is on post to the controller after save i am returning the ready only mode detail partial view. But instead of loading the partial view or hit done method of ajax it is redirecing the page to /FT/Edit url with detail partial view html on it. How to make sure the page is not redirected? what am i doing wrong?
//Once user clicks on Save button the below code will post the form data to controller
$(document).on("click", "#updateFTP", function () {
$.post("/Ftp/Edit", $('form').serialize())
.done(function (response) {
alert(response.responseText);
});
});
//On page load i am loading the partialview container witih read only view
LoadAjaxPage("/Ftp/DetailsByOrgId", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
//On edit button click i am loading the same div container with edit partial view
$(document).on("click", "#editFTP", function () {
// $("#createUserPartialViewContainer").load("/Users/Create?organizationId=" + orgId + "&organizationType=" + orgTypeId);
LoadAjaxPage("/Ftp/Edit", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
});
<div id="ftpPartialViewContainer">
</div>
<!--Details HTML partial view code-->
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<label for="Name" class="control-label">Name</label>
<input asp-for="Name" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<label for="Password" class="control-label">Password</label>
<input asp-for="Password" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Edit" class="btn btn-primary" id="editFTP" />
</div>
</div>
</div>
</div>
<!--Edit HTML partial view code-->
#model MyProject.Models.Ftp
#if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
#using (Html.BeginForm("Edit", "ftp", FormMethod.Post,))
{
#Html.ValidationSummary(true, "Please fix the errors")
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Pkid" />
<input type="hidden" asp-for="ConnectedTo" />
<input type="hidden" asp-for="ConnectedToType" />
<div class="row">
<div class="col">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary " id="updateFTP" />
</div>
</form>
</div>
</div>
}
Been struggling with this for about 4 hours, I'm attempting to have a modal drop down (Twitter bootstrap modal) that contains a form to create a Company. This is built in CodeIgniter.
I'm having issues with input type="submit" and input type="button".
I only have 1 required field, which is Company Name. If I use input type="button", the validation will fire correctly inside of the modal, however the form will only INSERT just the company name, along with company_id, user_id, active, and cdate.
Now if I use input type="submit", all the data inserts fine. However, the validation breaks and I get a "Page cannot be found" after clicking "Create Company", the data is still inserting though.
Any ideas? Thanks! New to AJAX...
My AJAX function:
$(document).ready(function(){
$('#create_btn').live('click', function(){
//we'll want to move to page specific files later
var name = $('#name').val();
$.ajax({
url: CI_ROOT + "members/proposals/add_client",
type: 'post',
data: {'name': name },
complete: function(r){
var response_obj = jQuery.parseJSON(r.responseText);
if (response_obj.status == 'SUCCESS')
{
window.location = CI_ROOT + response_obj.data.redirect;
}
else
{
$('#error_message2').html(response_obj.data.err_msg);
}
},
});
});
});
My controller function which handles the insert:
function add_client()
{
$this->form_validation->set_rules('name', 'Company Name', 'trim|required|xss_clean');
load_model('client_model', 'clients');
load_model('industry_model');
$user_id = get_user_id();
$company_id = get_company_id();
if (!$user_id || !$company_id) redirect('home');
if ($_POST)
{
if ($this->form_validation->run() == TRUE)
{
$fields = $this->input->post(null , TRUE);
$fields['user_id'] = $user_id;
$fields['company_id'] = $company_id;
$fields['active'] = 1;
$fields['cdate'] = time();
$insert = $this->clients->insert($fields);
if ($insert)
{
$this->message->set('alert alert-success', '<h4>Company has been added</h4>');
header('location:'.$_SERVER['HTTP_REFERER']);
}
else
{
$this->message->set('alert alert-error', '<h4>There was an issue adding this Company, please try again</h4>');
}
}
else
{
$err_msg = validation_errors('<div class="alert alert-error">', '</div>');
$retval = array('err_msg'=>$err_msg);
$this->ajax_output($retval, false);
}
}
$this->data['industries'] = array(0=>'Select Industry...') + $this->industry_model->dropdown('industry');
$this->insertMethodJS();
$this->template->write_view('content',$this->base_path.'/'.build_view_path(__METHOD__), $this->data);
$this->template->render();
}
And finally, my view:
<div class="modal hide fade" id="milestone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 600px !important;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Add a Company</h3>
</div>
<div class="modal-body">
<?php echo form_open_multipart(base_url().'members/proposals/add_client', array('class' => '', 'id' => 'client_form'));?>
<div id="error_message2"></div>
<div class="row-fluid">
<div class="span5">
<input type="hidden" name="cdate" id="cdate" value="" />
<div class="control-group">
<label class="control-label">Company Name: <span style="color: red;">*</span></label>
<div class="controls">
<input type="text" id="name" name="name" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">Company Abbreviation:<span style="color: red;">*</span></label>
<div class="controls">
<input type="text" id="abbreviation" name="abbreviation" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">Company Image: </label>
<div class="controls">
<input type="file" name="client_image" size="20" />
</div>
</div>
</div>
<div class="span5">
<div class="control-group">
<label class="control-label">Website:</label>
<div class="controls">
<input type="text" id="website" name="website" value=""/>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span5" style="margin-top: 25px;">
<div class="control-group">
<div class="controls">
<p><strong>Client</strong></p>
</div>
</div>
<div class="control-group">
<label class="control-label">Address 1:</label>
<div class="controls">
<input type="text" id="address1" name="address1" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">Address 2:</label>
<div class="controls">
<input type="text" id="address2" name="address2" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">City:</label>
<div class="controls">
<input type="text" name="city" id="city" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">State:</label>
<div class="controls">
<?= form_dropdown('state', usa_state_list(), set_value('state'), 'id=state'); ?>
</div>
</div>
<div class="control-group">
<label class="control-label">Zip:</label>
<div class="controls">
<input type="text" id="zip" name="zip" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">Country:</label>
<div class="controls">
<?= form_dropdown('country', country_list(), set_value('country'), 'id=country'); ?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-primary" id="create_btn">Create Company</button>
</div>
</form>
</div>
So again, to summarize. With input type="button", my validation works great within the modal and only the Company Name is inserting into the database along with company_id, user_id, active, and cdate.
Now, with input type="submit", all data inserts great, however validation fails and I get a redirect to a page cannot be found.
Again, thanks!
The issue is with your ajax function call.
You need to prevent the form from firing (and thus submitting via post to the url in action):
Change:
$('#create_btn').live('click', function(){
To:
$('#create_btn').live('click', function(e){
e.preventDefault();
This should fix the issue. If it doesn't, let me know and I'll do more digging. I would also recommend switching live to on so that you future-proof yourself. on handles the same stuff as live, bind, etc. in a single function with more efficiency.
Edit: To explain what's going on (and why you must use e.preventDefault();), it is because <input type="submit"> will actually submit the form to the url specified in the <form> tag's action attribute. Thus, what's happening with your code is that your javascript is running as soon as you click the button, and then the native browser submit event is occurring immediately afterwards.