Develop Reference

Cannot align button beside textbox in a input-group

I have the following form built using HTML Razor Syntax. I have 3 textboxes horizontally aligned in a single row. The third textbox needs to have a button right beside it. However, the button goes below the textbox. I don't know how to put it beside the textbox.
Here's the HTML code:
#using (Html.BeginForm("Save", "Import", FormMethod.Post, new { id = "import" }))
{
<div class="form-group col-xs-4">
#Html.LabelFor(m => m.CustomerId)
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></span>
#Html.DropDownListFor(m => m.CustomerId, Model.Customers, new { #class = "form-control", #id = "customer" })
</div>
</div>
<div class="form-group col-xs-4">
#Html.LabelFor(m => m.Order.OrderName, "Order Name")
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Order.OrderName, new { #class = "form-control", data_rule_validOrder = "true", #id = "order" })
</div>
#Html.ValidationMessageFor(m => m.Order.OrderName)
</div>
<div class="form-group col-xs-4">
#Html.LabelFor(m => m.Product.description, "Product")
<div class="tt-container input-group">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Product.description, new { #class = "form-control", data_rule_validProduct = "true", #id = "product" })
</div>
<span><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
#Html.ValidationMessageFor(m => m.Product.description)
</div>
Here's how the textboxes are aligned:
I want the "ADD" button to show beside the textbox.
ATTEMPTS: BASED ON DREAMTEK'S ANSWER:
<div class="form-group col-xs-4" style="margin-top:20px">
#Html.LabelFor(m => m.Product.description, "Product")
<div class="tt-container input-group d-inline-flex">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Product.description, new { #class = "form-control", data_rule_validProduct = "true", #id = "product" })
<span class="input-group-btn"><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
</div>
#Html.ValidationMessageFor(m => m.Product.description)
</div>
I get like this:

To demonstrate I am showing the markup in this example:
Move the button inside the local tt-container.
Add class d-inline-flex to the button.
Add class col (flex:1) to each item you wish to stretch.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-xs-4">
Product
<div class="tt-container input-group d-inline-flex">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
<input type="text" id="product" class="form-control col" />
<span><button type="button" id="addRow" class="btn btn-primary col">ADD</button></span>
</div>
</div>

You just have to:
Add input-group to your outer div
Add input-group-btn to your span of button, like this:
Like this:
//...
<div class="form-group input-group col-xs-4">
#Html.LabelFor(m => m.Product.description, "Product")
<div class="tt-container input-group">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Product.description, new { #class = "form-control", data_rule_validProduct = "true", #id = "product" })
</div>
<span class="input-group-btn"><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
#Html.ValidationMessageFor(m => m.Product.description)
</div>

Modal UI not working

I have this implementation for bootstrap modal with jquery. However, there are parts not showing when i do inspect element. Here is the code.
<div class="col-md-9 filter-header">
<i class="fa fa-plus fa-fws"></i> Add Role
</div>
Below, I have these to where the data to be put in.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
<div class="modal-dialog">
<div class="modal-content">
<!--Content Inside Here-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
I have jquery implementation to add the data.
$('.Roles')
.on('click', 'a[data-toggle="modal"]', function () { // show modal
$('.modal-content').load($(this).attr('href'));
})
.on('submit', '.ajaxForm', ajaxFormSubmit);
Here is the code to be put in the modal-content after calling the controller
#model C2T.Models.RoleViewModel
#{
ViewBag.Title = "Create Role";
Layout = null;
}
<div class="modalForm ">
#using (Html.BeginForm("CreateRole", "Admin", FormMethod.Post, new { #class = "ajaxForm", data_target = ".modalForm" }))
{
#Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-user-plus fa-fw"></i> New Role</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-sm-3" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control input-sm" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-sm-3" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control input-sm" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="spinner pull-left"></span>
<input type="button" value="Cancel" class="btn btn-default" data-dismiss="modal" />
<input type="submit" value="Create" class="btn btn-primary" />
</div>
}
</div>
The Roles is the body class and I am sure that when I click the modal the jquery codes were triggered. For some reason, it does display the data and the modal but the UI is not working. This is how it looks like.
I have inspect element also and this is the result, 'modal-dialog' and 'modal-content' class were not included.
Does anyone has an idea how to fix this issue? Thanks in advance.

Follow the hierarchy of div's to construct modals as recommended by bootstrap so that the styles are applied correctly. Currently, you have modalForm that encloses modal-content. Move your custom code inside modal-body for the styles to be applied correctly. In the snippet below, insert your custom code inside the modal-body div.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- INSERT CUSTOM CODE HERE -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

Model Error Not Showing after Http Post MVC 4

I am validating date input server side and adding ModelError if user input is invalid. Following is my code
public ActionResult EditOffer()
{
var offerID = Convert.ToInt64(Request.RequestContext.RouteData.Values["id"]);
using (joyryde_storeEntities context = new joyryde_storeEntities())
{
var objOffer = context.tbl_offer.Where(x => x.LNG_OFFER_ID == offerID).FirstOrDefault();
ViewBag.OfferID = offerID;
ViewBag.Header = "Edit " + objOffer.TXT_OFFER_TITLE;
ViewBag.ActionToPerform = "Edit";
if (System.IO.File.Exists(Server.MapPath(string.Format("~/assets/images/Stores/{0}/O_{1}_Small.jpg", Session["StoreID"], offerID))))
{
objOffer.TXT_OFFER_SMALL_PATH = string.Format("~/assets/images/Stores/{0}/O_{1}_Small.jpg", Session["StoreID"], offerID);
}
return View("AddOffer", objOffer);
}
}
[HttpPost]
public ActionResult EditOffer(tbl_offer modal, string Add, string Edit)
{
if (ModelState.IsValid)
{
using (joyryde_storeEntities context = new joyryde_storeEntities())
{
var offerID = Convert.ToInt64(Request.RequestContext.RouteData.Values["id"]);
if (!isOfferExist(modal.DAT_START_OFFER.Value.Date, modal.DAT_END_OFFER.Value.Date.AddHours(23).AddMinutes(59).AddSeconds(59).AddMilliseconds(999), Convert.ToInt64(Session["StoreID"]), offerID, Add, Edit, context))
{
// My Code
return RedirectToAction("AllOffers", "Store");
}
else
{
ModelState.AddModelError("DAT_START_OFFER", "Date Not Available"); // Here i am adding Modal Error For Date
if (Edit != null)
{
return RedirectToAction("EditOffer");
}
else
{
return RedirectToAction("AddOffer");
}
}
}
}
else
{
return RedirectToAction("EditOffer");
}
View
<div class="panel-body container-fluid">
#using (Html.BeginForm("EditOffer", "Store", FormMethod.Post, new { #class = "form-horizontal", enctype = "multipart/form-data" , id="offerForm"}))
{
#Html.AntiForgeryToken();
#Html.ValidationSummary(true);
<div class="form-group">
<label class="col-sm-3 control-label">Offer Title</label>
<div class="col-sm-6">
#Html.TextBoxFor(model => model.TXT_OFFER_TITLE, new { #class = "form-control", placeholder = "Offer Title", autocomplete = "off", name = "title" })
#Html.ValidationMessageFor(model => model.TXT_OFFER_TITLE, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Offer Banner</label>
<div class="col-sm-9">
<div class="image-container" style=" border: 1px solid #ccc; display: table;position:relative">
<a href="#editimage" data-toggle="modal" class="btn btn-sm btn-icon btn-inverse btn-round btn-image-edit" data-toggle="tooltip" data-original-title="Edit">
<i class="icon wb-pencil" aria-hidden="true"></i>
</a>
<div class="img-preview preview-lg">
<img id="image_upload_preview" src="#Url.Content(string.Format("~/assets/images/Stores/{0}/O_{1}_Small.jpg", Session["StoreID"], ViewBag.OfferID))" style="width:100%" alt="your image" />
</div>
</div>
<div class="input-group-file" style="margin-top:5px">
#Html.TextBoxFor(modal => modal.TXT_OFFER_SMALL_PATH, new { #class = "hide", #readonly = "true", width = "0", id = "filePath" })
#Html.ValidationMessageFor(modal => modal.TXT_OFFER_SMALL_PATH, "", new { #class = "text-danger" })
<span class="">
<span class="btn btn-success btn-small btn-file">
Upload Image <i class="icon wb-upload" aria-hidden="true"></i>
<input type="file" name="files" accept="image/*" multiple="" id="fileupload" onchange="showimagepreview(this)">
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Offer Detail </label>
<div class="col-sm-6">
#Html.TextAreaFor(model => model.TXT_OFFER_TEXT, new { #class = "form-control", placeholder = "Offer Text", autocomplete = "off", name = "text" })
#Html.ValidationMessageFor(model => model.TXT_OFFER_TEXT, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Valid For</label>
<div class="col-sm-4">
<div class="input-daterange" data-plugin="datepicker">
<div class="input-group">
<span class="input-group-addon">
<i class="icon wb-calendar" aria-hidden="true"></i>
</span>
#Html.TextBoxFor(model => model.DAT_START_OFFER, "{0:dd MMMM yyyy}", new { #class = "form-control from_date", placeholder = "Start Date", autocomplete = "off", name = "start" })
#Html.ValidationMessageFor(model => model.DAT_START_OFFER, "", new { #class = "text-danger" })
</div>
<div class="input-group">
<span class="input-group-addon">to</span>
#Html.TextBoxFor(model => model.DAT_END_OFFER, "{0:dd MMMM yyyy}", new { #class = "form-control to_date", placeholder = "End Date", autocomplete = "off", name = "end" })
#Html.ValidationMessageFor(model => model.DAT_END_OFFER, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Is Premium</label>
<div class="col-sm-4">
<div class="radio-custom radio-default radio-inline">
#Html.RadioButtonFor(model => model.INT_IS_PRIME, 1, new { #id = "ispremiumYes", name = "ispremium", #checked = "checked" })
<label for="ispremiumYes">Yes</label>
</div>
<div class="radio-custom radio-default radio-inline">
#Html.RadioButtonFor(model => model.INT_IS_PRIME, 0, new { #id = "ispremiumNo", name = "ispremium", })
<label for="ispremiumNo">No</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<button type="submit" name="#ViewBag.ActionToPerform" class="btn btn-primary">Submit </button>
<button type="reset" class="btn btn-default btn-outline">Reset</button>
</div>
</div>
#Html.Hidden("cropWidth", new { id = "cropWidth" })
#Html.Hidden("cropHeight", new { id = "cropHeight" })
#Html.Hidden("cropPointX", new { id = "cropPointX" })
#Html.Hidden("cropPointY", new { id = "cropPointY" })
#Html.Hidden("ImgSrc", new { id = "ImgSrc" })
}
<div class="modal fade" id="editimage" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document" style="width:1024px;height:768px">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabel">Crop the image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-9">
<div class="cropper text-center">
<img id="image" src="#Url.Content(string.Format("~/assets/images/Stores/{0}/O_{1}_Small.jpg", Session["StoreID"], ViewBag.OfferID))" style="max-width:730px;" alt="Picture">
</div>
</div>
<div class="col-sm-3">
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But Modal Error is not showing on view. What could be the cause ?

When you set your model error then you use RedirectToAction, what mean that you load new page, check in your debug, after that your code go back to GET method and everything is reloaded.
You have to return your View with model.
ModelState.AddModelError("DAT_START_OFFER", "Date Not Available");
if (Edit != null)
{
return View(modal); //if your model is object named modal
}

You didn't see any error because of RedirectToAction. You should use the "View" method. For example you can just write return EditOffer()

If you use return RedirectToAction("EditOffer"); the error will not been show it will be redirect to public ActionResult EditOffer(){} Action method, the [HttpGet] will be shown. To rectify this error, you should use View() method. like return View(); it return the error to the form data posted page.
[HttpPost]
public ActionResult EditOffer(tbl_offer modal, string Add, string Edit)
{
if (ModelState.IsValid)
{
using (joyryde_storeEntities context = new joyryde_storeEntities())
{
var offerID = Convert.ToInt64(Request.RequestContext.RouteData.Values["id"]);
if (!isOfferExist(modal.DAT_START_OFFER.Value.Date, modal.DAT_END_OFFER.Value.Date.AddHours(23).AddMinutes(59).AddSeconds(59).AddMilliseconds(999), Convert.ToInt64(Session["StoreID"]), offerID, Add, Edit, context))
{
// My Code
return RedirectToAction("AllOffers", "Store");
}
else
{
ModelState.AddModelError("DAT_START_OFFER", "Date Not Available"); // Here i am adding Modal Error For Date
if (Edit != null)
{
return View(modal);
}
else
{
return RedirectToAction("AddOffer");
}
}
}
}
else
{
ViewBag.OfferID = Here give the office id;
ViewBag.Header = "Edit " + objOffer.TXT_OFFER_TITLE;
ViewBag.ActionToPerform = "Edit";
ModelState.AddModelError("","Your Error Message"); // Here i am adding Modal Error For Date
return View(modal);
}
}

Make Label and Checkbox closer together in razor view

I have a label and a checkbox in my view that I would like next to each other. However, as you can see in this picture I cannot get them any closer.
Here is my view code:
#using (Html.BeginForm("AddTechNote", "Ticket", FormMethod.Post)) { #Html.AntiForgeryToken()
<div class="form-group">
#Html.HiddenFor(model => model.TicketId)
<div class="col-md-12 col-xs-12">
<div class="col-md-3">
#Html.Label("New Note", new { #class = "control-label" })
</div>
<div class="col-md-1" style="text-align: right">
#Html.Label("Public", new { #class = "control-label" })
</div>
<div class="col-md-1">
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</div>
</div>
<div class="col-md-12 col-xs-12">
#Html.TextArea("Note", new { cols = 600, #rows = 5 })
</div>
<div class="form-group">
<div class="col-md-2">
<input type="submit" value="Add" class="btn btn-default" />
</div>
#*<div class="col-md-1 col-lg-offset-1">
</div>
*#
</div>
</div>
}
Jesus,
This is what I get with the code you provided. Thank you for your help so far.

You can do following:
Use only one div for both label and checkbox like:
<div class="col-md-1" style="text-align: right">
#Html.Label("Public", new { #class = "control-label" })
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</div>
The label need to wrap the input.

You need to change your Razor view, something like this:
<div class="#Model.ControlDimension">
<div class="checkbox #Model.CheckBoxDivClasses">
<label for="#Model.ControlName">#Html.Raw(Model.Label)#Model.ControlFor</label>
#Model.ValidationMessageFor
</div>
</div>
The control needs to be inside the label element.
In your case, I think ...:
<div class="col-md-2">
<div class="checkbox">
<label for="PublicNote">
Public
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</label>
</div>
</div>

Activate method in form

I want to submit a single text field in a form. I have this view:
#model SenecaFormsServer.Areas.Dashboard.Models.EditProductModel
#using SenecaFormsServer.Areas.Dashboard.Models
#using Seneca.SfsLib.Connectors
<div id="ConnectorSettings-MAIL_PRODUCT_HANDLERS">
<h4>#Resources.Entity.Product.SettingsForConnector: Mail product handlers</h4>
#{
MailProductHandlersModel mailModel = Model.ConnectorModels["MAIL_PRODUCT_HANDLERS"] as MailProductHandlersModel;
}
<div class="form-group">
#Html.Label(Resources.Entity.Product.Sender, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Editor("MailProductHandlers_sender", new { htmlAttributes = new { #class = "form-control", #Value = mailModel.Sender, #placeholder = Model.CustomerConfig.DefaultSenderAddress } })
</div>
</div>
<div class="form-group">
#Html.Label(Resources.Entity.Product.MailSubject, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Editor("MailProductHandlers_subject", new { htmlAttributes = new { #class = "form-control", #Value = mailModel.Subject } })
</div>
</div>
<!--
<div class="form-group">
#Html.Label("Reply to form submitter", new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.CheckBox("MailProductHandlers_replytoFormSubmitter", new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
-->
<div class="form-group">
#Html.Label(Resources.Entity.Product.MailMessage, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.Message, new { htmlAttributes = new { #class = "form-control tiny-mce", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.Message)
#*#Html.TextArea("MailProductHandlers_message", mailModel.Message, new { #class = "form-control", #rows = 15 })*#
</div>
</div>
<div class="form-group">
#Html.Label(Resources.Entity.Product.GeneratePDF, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Label(Resources.Entity.Product.GeneratePDFYes) #Html.RadioButtonFor(model => model.IsChecked, true, new { #checked = "checked", #class = "pdfchecker" })
#Html.Label(Resources.Entity.Product.GeneratePDFNo) #Html.RadioButtonFor(model => model.IsChecked, false, new { #class = "pdfchecker" })
</div>
</div>
<div class="form-group">
<div id="hideLable">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
</div>
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
</div>
</div>
#using (Html.BeginForm("GeneratePDFFromHtml", "Product", FormMethod.Post)) {
#Html.AntiForgeryToken()
<div class="col-xs-12 padding-bottom-10">
#*<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF *#
<button type="submit" value="Save" class="btn btn-success"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>
</div>
}
And I want to submit this part:
#using (Html.BeginForm("GeneratePDFFromHtml", "Product", FormMethod.Post)) {
#Html.AntiForgeryToken()
<div class="col-xs-12 padding-bottom-10">
#*<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF *#
<button type="submit" value="Save" class="btn btn-success"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>
</div>
}
and this is the action method:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GeneratePDFFromHtml(EditProductModel model, string data, string designId)
{
string customerSchema = SfsHelpers.StateHelper.GetSchema();
//TemplateLibraryEntry entry = GetTemplateLibraryEntry(designId, customerSchema);
SubmittedForm sf = new SubmittedForm();
string schema = requestSchema;
customer_DbConnection db = new customer_DbConnection();
RenderFormController renderController = new RenderFormController();
renderController.GeneratePdf(data, db,sf);
//return RedirectToAction(model.DesignId, "Prdocut/Edit");
return Content("It works");
}
</div>
but the action method is not been triggered.
How to trigger the action method?
There has be created a PDF file from this textfield:
#using (Html.BeginForm("GeneratePDFFromHtml", "Product", null, FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.AntiForgeryToken()
<div class="form-group">
<div id="hideLable">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
</div>
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
</div>
</div>
<div class="col-xs-12 padding-bottom-10">
<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF
#*<button type="submit" value="Save" class="btn btn-success"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>*#
</div>
}
and this is also the action method that has to been triggered and create the PDF file. But the method is not been triggered in the controller
The problem is that it is a partial view. So I solved like this:
Jquery:
$(document).ready(function () {
$('#btnGeneratePDF').click(function () {
var form = document.createElement("form");
form.setAttribute("GeneratePDFFromHtml", "post");
form.setAttribute("action", "GeneratePDFFromHtml");
form.setAttribute("target", "_blank");
var hiddenField = document.createElement("btnGeneratePDF");
//hiddenField.setAttribute("name", "search");
//hiddenField.setAttribute("value", "product1,product2");
hiddenField.setAttribute("type", "hidden");
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
});
});
and the view looks like now this:
<form method="post" id="form" name="form" action="#Url.Action("GeneratePDFFromHtml", "Product")" enctype="multipart/form-data">
<fieldset>
<div class="form-group">
<div id="hideLable">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
</div>
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
</div>
</div>
<div class="col-xs-12 padding-bottom-10">
#*<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF *#
<button type="submit" value="Create" class="btn btn-success" id="btnGeneratePDF" name="btnGeneratePDF" formtarget="_blank" onclick="GeneratePDFFromHtml()"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>
</div>
</fieldset>
</form>
but the url is now like this, after I press on the button:
http://localhost:51098/Dashboard/Product/Edit/GeneratePDFFromHtml?
what is ofcourse not correct. so how to trigger the method in the controller?
I get also this warning: Uncaught ReferenceError: GeneratePDFFromHtml is not defined