I'm using MVC 4 and Entity Framework and Grid.MVC for datagrid.
I have tried to implement a modal dialog to edit records using bootstrap.
When i click edit, modal window does not appear.
I follow the instruction how to create modal here:
Popup dialog for editing record using Grid.MVC in a ASP.NET MVC3
here is my code
YOU CAN DOWNLOAD MY SAMPLE PROJECT HERE
HomeController
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult HR201()
{
DCHREmployee dchremp = new DCHREmployee();
List<HREmployee> hrempList = new List<HREmployee>();
foreach (HREmployee hremp_ in dchremp.GetHREmployee(""))
{
hrempList.Add(hremp_);
}
return View(hrempList);
}
[HttpGet]
public ActionResult Edit(String EmpID)
{
DCHREmployee dchremp = new DCHREmployee();
List<HREmployee> hrempList = new List<HREmployee>();
foreach (HREmployee hremp_ in dchremp.GetHREmployee(EmpID))
{
hrempList.Add(hremp_);
}
return View(hrempList[0]);
}
}
HR201 cshtml view
#model IEnumerable<TAObjectModel.HREmployee>
#using GridMvc.Html
#using TAObjectModel
#{
ViewBag.Title = "HR201";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="#Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery-1.9.0.min.js")"></script>
<script src="#Url.Content("~/Scripts/gridmvc.min.js")"></script>
<title>Index</title>
</head>
<body>
<div class="container">
</div>
<div class="container">
#helper RenderDeleteForm(HREmployee hremp)
{
<form method="POST" action="#Url.Action("Delete", "HR201", new { EmpID = hremp.EmpID })">
<button type="submit" class="modal-link" onclick="return confirm('Are you sure you want to delete employee: #hremp.LastNm?');">
Delete
</button>
</form>
}
<h2>HR201</h2>
<div class="pull-left">
#using (Html.BeginForm())
{
<button type="submit" class="btn btn-primary">Add</button>
<button type="submit" class="modal-link">MODAL</button>
}
</div>
#Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.EmpID).Titled("EmpID").Filterable(true);
columns.Add(c => c.FirstNm).Titled("First Name");
//columns.Add(c => c.MiddleNm).Titled("Middle Name");
//columns.Add(c => c.LastNm).Titled("Lastn Name");
columns.Add(c => c.BirthDt).Titled("BirthDay").Format("{0:dd MMM yyyy}").Filterable(true);
columns.Add().Titled("Action")
.Sanitized(false)
.Encoded(false)
.RenderValueAs(d => Html.ActionLink("Edit", "Edit", new { EmpID = d.EmpID }, new { #class = "modal-link" }));
columns.Add().Titled("Action2")
.Sanitized(false)
.Encoded(false)
.RenderValueAs(c => RenderDeleteForm(c));
}).WithPaging(10).Sortable(true)
#Html.ActionLink("Click to Add Customer", "Edit",new{EmpID = "E9770003"}, new { #class = "modal-link" })
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Loading…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
//this script reset modal each time when you click on the link:
$(function () {
$(".modal-link").click(function (event) {
event.preventDefault();
$('#myModal').removeData("modal");
$('#myModal').modal({ remote: $(this).attr("href") });
});
})
</script>
</body>
</html>
EDIT VIEW
<div class="container">
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>HREmployee</legend>
<div class="editor-label">
#Html.LabelFor(model => model.EmpID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.EmpID)
#Html.ValidationMessageFor(model => model.EmpID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.FirstNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstNm)
#Html.ValidationMessageFor(model => model.FirstNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastNm)
#Html.ValidationMessageFor(model => model.LastNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.MiddleNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MiddleNm)
#Html.ValidationMessageFor(model => model.MiddleNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.SenseID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SenseID)
#Html.ValidationMessageFor(model => model.SenseID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.NickNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.NickNm)
#Html.ValidationMessageFor(model => model.NickNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.BirthDt)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BirthDt)
#Html.ValidationMessageFor(model => model.BirthDt)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
</div>
**
Related
I have the following code in a custom plugin in NopCommerce v3.8.
#using Nop.Web.Framework;
#using Nop.Core;
#using System.Linq;
#using Nop.Web.Framework.UI;
#using Nop.Web.Framework;
#using Nop.Core.Infrastructure;
#model Nop.Plugin.Widgets.PromoSlider.Domain.PromoSliderRecord
#{ Layout = "_AdminLayout.cshtml"; }
<div class="content">
<div class="form-horizontal">
<div id="slider-edit" class="nav-tabs-custom">
<ul class="nav nav-tabs">
#Html.RenderBootstrapTabHeader("Slider", #T("Slider"), true)
#Html.RenderBootstrapTabHeader("Images", #T("Images"))
</ul>
<div class="tab-content">
#Html.RenderBootstrapTabContent("Slider", Sliders(), true)
#Html.RenderBootstrapTabContent("Images", Images(), false)
</div>
</div>
</div>
</div>
#helper Sliders()
{
using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div>
<div class="adminData">#Html.HiddenFor(m => m.PromoSliderId)</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.PromoSliderName)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.PromoSliderName)
#Html.ValidationMessageFor(m => m.PromoSliderName)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.IsActive) </div>
<div class="col-md-9">
#Html.EditorFor(m => m.IsActive)
#Html.ValidationMessageFor(m => m.IsActive)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.Interval)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.Interval)
#Html.ValidationMessageFor(m => m.Interval)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.Wrap)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.Wrap)
#Html.ValidationMessageFor(m => m.Wrap)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.PauseOnHover)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.PauseOnHover)
#Html.ValidationMessageFor(m => m.PauseOnHover)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.ZoneName)</div>
<div class="col-md-9">
#Html.DropDownListFor(m => m.ZoneName, new SelectList(
new List<string>() {
"producdivetails_top",
"categorydetails_after_breadcrumb",
"home_page_top"
}))
#Html.ValidationMessageFor(m => m.ZoneName)
</div>
</div>
<div class="pull-right">
<button type="submit" name="save" class="btn bg-blue">
<i class="fa fa-floppy-o"></i>
#T("DERP")
</button>
</div>
</div>
</div>
</div>
}
}
#helper Images()
{
if (Model.PromoSliderId > 0)
{
#Html.Action("ManagePromoImages", new { PromoSliderId = Model.PromoSliderId })
}
else
{
<p>Please create and save a slider first.</p>
}
}
Submit button doesnt fire at all, reason can be found by looking at the generated source.
<div class="content">
<div class="form-horizontal">
<div id="slider-edit" class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a data-tab-name="Slider" data-toggle="tab" href="#Slider">slider</a></li>
<li class=""><a data-tab-name="Images" data-toggle="tab" href="#Images">images</a></li>
</ul>
<div class="tab-content">
<form action="/PromoSlider/CreateUpdatePromoSlider" method="post"></form><div class="tab-pane active" id="Slider"><input name="__RequestVerificationToken" type="hidden" value="uH2GbG4t6n0dDyBs79d6GQZTorBRpgWFCFithR77gSkAUYvPkMecNIwYtkEGyayid97gmdQp-isUUkMq1M7qSpeYOzwLGW-9WtUIxggkBd-0gATnIt5CvfEtUpjqwnl90" /> <div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div>....
As you can see for some mad reason it decideds to create the form, then close it and input all the #helper html code including the submit button, after the form.
My question, Can you still use
#Html.BeginForm
inside of the
#Html.RenderBootstrapTabHeader
Really would like to get this working in 3.8 thanks.
The only way which I can offer now is to use <form></form> tag with required parameters to create a form inside #helper {}.
We have created an appropriate issue to investigate this problem:
https://github.com/nopSolutions/nopCommerce/issues/1840
I am creating a page in Asp.Net MVC where a user can upload a file, along with details about the file from textboxes.
For this I use a viewmodel, and a very simple method configuration. The page is populated correctly by the [Get] Method, and the user can choose the file and enter the details, but once the 'Submit' button is clicked, and the [Post] method is called, the viewmodel is completely null.
I have done my research on this and have tried:
adding enctype="multipart/form-data"
simply using the file as a separate parameter
To no avail.
Here is my controller methods:
public ActionResult FileComment(int id)
{
//set up [get] view
return View("FileComment", obj);
}
//THIS METHOD's VIEWMODEL ALWAYS NULL
[HttpPost]
public ActionResult FileComment(CalibrationCommentViewModel file)
{
//save file to database
return View("Edit", new { id = file.id });
}
Here is part of my view:
#using (Html.BeginForm("FileComment", "Calibration", FormMethod.Post, new { enctype = "multipart/form-data", #data_ajax = "false" }))
{
#Html.HiddenFor(m => m.ID)
<div class="container">
<h4>Add File for #Model.ID</h4>
<hr />
<div class="row">
<div class="col-md-1">g
#Html.LabelFor(model => model.file, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-2">
#Html.TextBoxFor(model => model.file, new { type = "file" })
</div>
<div class="col-md-9"></div>
</div>
<br />
<div class="row">
<div class="col-md-1">
#Html.LabelFor(model => model.attachmentType, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-2">
#Html.DropDownListFor(model => model.attachmentType, Model.attachTypeList, new { #class = "form-control" })
</div>
<div class="col-md-9"></div>
</div>
<br />
<div class="row">
<div class="col-md-1">
#Html.LabelFor(model => model.Date, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-2">
#Html.EditorFor(model => model.Date)
</div>
<div class="col-md-9"></div>
</div>
<br />
<div class="row">
<div class="col-md-1">
#Html.LabelFor(model => model.description, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-2">
#Html.TextAreaFor(model => model.description, new { cols=35, #rows=3})
</div>
<div class="col-md-9"></div>
</div>
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<button type="submit" onclick="JavascriptFunction()">Add to #Model.ID</button>
</div>
<div class="col-md-9"></div>
</div>
</div>
}
Change
public ActionResult FileComment(CalibrationCommentViewModel file)
to
public ActionResult FileComment(CalibrationCommentViewModel model)
your view has no reference to view model at the top the view something like this
#model Nameofyourproject.Models.CalibrationCommentViewModel
I am using MVC 4 (C# with razor) and I have added a jquery datepicker to my page which works fine.
I now want to add a tooltip which I have done in the code below.
<div class="editor-label">
#Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Rating, new { title = "Rating" })
#Html.ValidationMessageFor(model => model.Rating)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate, new { id = "ReleaseDate" })
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
With the script as
<script type="text/javascript">
$(function () {
$('#ReleaseDate').datepicker({ dateFormat: "dd-mm-yy" });
$( document ).tooltip();
});
The date picker works fine but nothing happens with the tooltip, any ideas?
Here is the full page code for the view
#model testpage.Models.Game
#{
ViewBag.Title = "Create";
}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Game</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Rating, new { #title = "Rating" })
#Html.ValidationMessageFor(model => model.Rating)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate, "Release Date")
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate, new { id = "ReleaseDate" })
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Price)
#Html.ValidationMessageFor(model => model.Price)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
$(function () {
$('#ReleaseDate').datepicker({ dateFormat: "dd-mm-yy" });
$( document ).tooltip();
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
After a lucky find on google the tooltip doesn't work with editorfor so I changed it to TextBoxfor and it worked great
I'm only starting in MVC4 and
I'm trying to put multiple partial views in one page every partial is suppose to be with different data but it is always show one partial with only one data
every partial is shown on button click.
This is the view code:
<section id="comments">
<h3>Comments</h3>
#{
foreach (MvcApplication4.Models.comment item in postComments)
{
<article>
<p>#item.body</p>
using (Html.BeginForm("Delete", null, new { id = item.ID ,pid = item.idPost}, FormMethod.Post))
{
#Html.HttpMethodOverride(HttpVerbs.Delete)
<button type="submit" class="button delete" >Delete</button>
}
<section>
<button type="submit" class="button Edit" id="edit" onclick="return showHide();" >Edit</button>
<div id="partial" hidden="hidden">
#Html.Partial("editCom",item)
</div>
</section>
}
}
</article>
}
}
</section>
This is the showhide partial:
<script type="text/javascript" language="javascript">// <![CDATA[
function showHide() {
var ele = document.getElementById("partial");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
// ]]></script>
This is the partial :
#using MvcApplication4.Models
#model MvcApplication4.Models.comment
#{comment com = Model;
}
#using (Html.BeginForm("Edit", null,new{ pid=com.idPost,cid=com.ID}, FormMethod.Post))
{
<fieldset>
<div class="editor-label">
#Html.LabelFor(x => com.user)
</div>
<div class="editor-field">
#Html.LabelFor(x => com.user,Session["username"].ToString())
#Html.ValidationMessageFor(x => com.user)
</div>
<div class="editor-label">
#Html.LabelFor(x => com.email)
</div>
<div class="editor-field">
#Html.EditorFor(x => com.email,com.email)
#Html.ValidationMessageFor(x => com.email)
</div>
<div class="editor-label">
#Html.LabelFor(x => com.url)
</div>
<div class="editor-field">
#Html.EditorFor(x => com.url,com.url)
#Html.ValidationMessageFor(x => com.url)
</div>
<div class="editor-label">
#Html.LabelFor(x => com.body)
</div>
<div class="editor-field">
#Html.EditorFor(x => com.body,com.body)
#Html.ValidationMessageFor(x => com.body)
</div>
<p>
<input type="submit" value="save" />
</p>
</fieldset>
}
Your code for
<div id="partial" hidden="hidden">
#Html.Partial("editCom",item)
</div>
Determines which sections are controled by the buttons:
var ele = document.getElementById("partial");
if(ele.style.display == "block") {
ele.style.display = "none";
}
....
You are generating several sections all with the same id of "partial" then expecting the button to determine which div to manage without a unique id of some kind via getElementById("partial")
Instead, you need to generate a unique id for each <div> and then use the same id in your javascript method for getElementById()
Hi guys i have the following code in my view:
#model Test.tblReview
#{
ViewBag.Title = "Create";
}
<div class = "under">
Add a New Review
</div>
<br />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.HiddenFor(model => model.ReviewID)
</div>
<div class="editor-field">
#Html.HiddenFor(model => model.ReviewID)
#Html.HiddenFor(model => model.ReviewID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Recomendation)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Recomendation, new { style = "max-width: 200px; max-height: 150px;" })
#Html.ValidationMessageFor(model => model.Recomendation)
</div>
<br />
<div class="editor-label">
#Html.LabelFor(model => model.AvoidOrBuy)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.AvoidOrBuy, new { style = "max-width: 200px; max-height: 150px;" })
#Html.ValidationMessageFor(model => model.AvoidOrBuy)
</div>
<br />
<div class="editor-label">
#*#Html.LabelFor(model => model.Posted)*#
</div>
<div class="editor-field">
#Html.HiddenFor(m => m.Posted)
#Html.ValidationMessageFor(model => model.Posted)
</div>
<br />
<div class="editor-label">
#Html.LabelFor(model => model.Score)
</div>
<br />
<div class="demo" style="width: 185px">
<div id="slider-range-max"></div>
</div>
<br />
<p>Score Added From Scroll Bar</p>
<div class="editor-field">
#Html.EditorFor(model => model.Score)
#Html.ValidationMessageFor(model => model.Score)
</div>
<br />
<div class="editor-label">
#Html.LabelFor(model => model.GameIDFK, "tblGame")
</div>
<div class="editor-field">
#Html.DropDownList("GameIDFK", String.Empty)
#Html.ValidationMessageFor(model => model.GameIDFK)
</div>
<div class="editor-label">
#Html.HiddenFor(model => model.UserName)
</div>
<div class="editor-field">
#Html.HiddenFor(model => model.UserName)
#Html.HiddenFor(model => model.UserName)
</div>
<br />
<p>
<input type="submit" value="Create" />
</p>
}
<div>
#Html.ActionLink("Go To Reviews", "Index") | #Html.ActionLink("Go Back To Games", "Index", "Game")
</div>
<script type="text/javascript">
$(function () {
$("#slider-range-max").slider({
range: "max",
min: 1,
max: 10,
value: 1,
slide: function (event, ui) {
$("#Score").val(ui.value);
}
});
$("#Score").val($("#slider-range-max").slider("value"));
});
</script>
Everything works fine but i would like way to make the value in the drop down to clear once its been selected and the submit button is pressed, If you require addtional information please ask me thank you
the value in the drop down to clear once its been selected and the
submit button is pressed
Why do you need to do this ? I strongly believe that you should not change the value if you are going to submit it to an action method where you are going to read it for further processing. because you are not gonna get the selected value there. If you are not worried about the selected value, then you can clear that by jQuery like this
$(function(){
$("form").submit(function(){
$("#GameIDFK").empty();
return true;
});
});
Another thing came to my mind is that , If you really want to clear the drop down, but still use in your action method, you probably need to have a hidden input element in your form and using java script, you can set the selected value of drop down to that. Then in you can clear your drop down and then in your action method, you can read from the hidden input instead of the actual drop down.