I want to open view as pop up window.
Here is my
controller
#region Send Voting Email
[HttpGet]
[OutputCache(Location = OutputCacheLocation.None)]
[Authorize]
public ActionResult SendVotingEmail(string CampID)
{
try
{
var model = (new CampManager()).GetCampDetails(CampID);
var user = (Bank.Security.BankMembershipUser)Membership.GetUser();
Models.Camp.EmailModel VotingModel = new Models.Camp.EmailModel();
VotingModel.CampID = CampID;
VotingModel.BankName = user.BankName;
VotingModel.Message = "";
return RedirectToAction("Send", VotingModel);
//(new CampManager()).SendEmail(CampID, user.BankName,"");
//return Content("Email send successfully.");
}
catch(Exception ex)
{
return Content("Sorry, An error occured while sending Voting Email. Please contact Administrator.");
}
}
#endregion
#region Send Voting mail popup
[HttpGet]
public ActionResult Send(Models.Camp.EmailModel model)
{
return View(model);
}
[HttpPost]
public ActionResult Send(Models.Camp.EmailModel model,string CampID)
{
(new CampManager()).SendEmail(model.CampID,model.BankName,model.Message);
return Content("Email send successfully.");
}
#endregion
Sendmail.cshtml
<input type="button" id="ClickMe" name = "ClickMe" value="Send Voting Email" onclick="SendEmail('#Model.CampID');" />
<script type="text/javascript">
$(function () {
$('#ClickMe').click(function () {
window.open('/Camp/Send/', 'mail', 'height=' + (window.screen.height - 100) + ',width=200,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');
});
});
function SendEmail(CampID) {
$('#sendEmailProgressBar').css("visibility", "visible");
$.get('/bank/Camp/SendEmail?CampID=' + CampID, function (data) {
$('#sendEmailProgressBar').css("visibility", "collapse");
alert(data);
});
</script>
Send.cshtml
#model Bank.Models.Camp.EmailModel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Send</title>
</head>
<body>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>EmailModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.CampID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CampID)
#Html.ValidationMessageFor(model => model.CampID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.BankName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BankName)
#Html.ValidationMessageFor(model => model.BankName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Message)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Message)
#Html.ValidationMessageFor(model => model.Message)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I want to open pop windows When I click on ClickMe button of SendMail.cshtml. When I cilck on this button Pop up window open but it shows code of Send.cshtml view. I don't know why this happen. Is there any changes in my code to open pop up window?
Try this
<script type="text/javascript">
function OpenWindow(query, w, h, scroll) {
var l = (screen.width - w) / 2;
var t = (screen.height - h) / 2;
winprops = 'resizable=0, height=' + h + ',width=' + w + ',top=' + t + ',left=' + l + 'w';
if (scroll) winprops += ',scrollbars=1';
var f = window.open(query, "_blank", winprops);
}
$(function () {
$('#ClickMe').click(function () {
OpenWindow('#Url.Action("Send","Camp")', width, height, true);
});
});
</script>
// In Controller
[HttpGet]
public ActionResult Send()
{
//prepared your model object here
var model = new Models.Camp.VotingEmailModel();
return View(model);
}
check this question.the second answer is exactly what you want.it will open up a new window when you submit your form.you can even customize window settings before submitting your form to the new window.
Related
I have an Ajax form which is working properly:
<div class="row">
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result"></div>
<div class="col-sm-8 col-sm-offset-2">
<h4>Contact Us</h4>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
#Html.LabelFor(a=>a.Email)
#Html.EditorFor(a => a.Email)
#Html.ValidationMessageFor(a => a.Email)
#Html.LabelFor(a=>a.Name)
#Html.EditorFor(a => a.Name)
#Html.ValidationMessageFor(a => a.Name)
#Html.LabelFor(a=>a.Phone)
#Html.EditorFor(a => a.Phone)
#Html.ValidationMessageFor(a => a.Phone)
#Html.LabelFor(a=>a.Message)
#Html.EditorFor(a => a.Message)
#Html.ValidationMessageFor(a => a.Message)
<input type="submit" class="btn btn-primary" value="Send Message" />
}
</div>
However, the results div, which I'd like to be styled as an alert, is always displaying by default. How can I make it display only when it has inner text? Is there something like #if(AjaxResult != null) { <div>...</div> }?
I suspect this can be solved within the View only, but I'm including my Controller code below for completeness:
[HttpPost]
public ActionResult Index(ContactUsViewModel model)
{
var fromAddress = new MailAddress("X", "X");
var toAddress = new MailAddress("X", "X");
string fromPassword = "X";
string subject = "GN Query";
string body = model.Message;
var smtp = new SmtpClient
{
Host = "smtp.gmail.com",
Port = 587,
EnableSsl = true,
DeliveryMethod = SmtpDeliveryMethod.Network,
UseDefaultCredentials = false,
Credentials = new NetworkCredential(fromAddress.Address, fromPassword)
};
using (var message = new MailMessage(fromAddress, toAddress)
{
Subject = subject,
Body = body
})
{
smtp.Send(message);
}
return Content("Your message has been received and we will respond within 24-48 hours.", "text/html");
}
You can create a partial view call _alert with your html:
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
Your message has been received and we will respond within 24-48 hours.
</div>
and then in your view you can set a container div in which it will be rendered when ajax call completes:
<div id="messageContainer">
</div>
now your action should return that partial view and you can have a boolean in your view to decide either render or not:
#model System.Boolean
#if(Model)
{
<div class="col-sm-8 col-sm-offset-2 alert alert-info" id="result">
Your message has been received and we will respond within 24-48 hours.
</div>
}
your controller action will decide either the operation was successful and show the message or not:
bool isSuccess = true; // your logic to set this flag
............
............
{
smtp.Send(message);
}
return PartialView("_alert.cshtml",isSuccess );
and in main view you will have :
<div id="messageContainer">
</div>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "messageContainer" }))
Hope it helps.
i working with asp.net mvc5 and trying to post a form to the controller without refreshing the page using ajax. but the problem is that each time i press the submit button, it sends the data many times. only the first time it submits the form once. but the second time it send twice, and the third time it sends four times and ...
here is my controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UniProject.Models;
namespace UniProject.Controllers
{
public class TestController : Controller
{
MyContext db = new MyContext();
// GET: Test
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Create(Test test)
{
try
{
if (ModelState.IsValid)
{
db.Tests.Add(test);
db.SaveChanges();
ViewBag.Record = "Data Inserted";
return PartialView("Index");
}
else
{
ViewBag.Record = "Error";
return View(test);
}
}
catch
{
ViewBag.Record = "Error";
return View();
}
}
}
}
this is my view
#model UniProject.Models.Test
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<h2>Index</h2>
<div id="div">
#Html.Partial("Form" , Model)
</div>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
My PartialView
#model UniProject.Models.Test
#using (Ajax.BeginForm("Create" , "Test" , new AjaxOptions { HttpMethod = "post" , UpdateTargetId = "div"}))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Test</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.TestName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TestName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TestName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TestTitle, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TestTitle, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TestTitle, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
this the form view after once clicking submit button
Form Image
and this is the database image
Database Records
please help me with this issue. thanks in advance...
I have a parent View & a child View.
When posing with the Ajax.BeginForm, I'm expecting back the entire parent view plus the results of the partial view updated. Only the results of the partial view is displayed.
In addition, the "OnSuccess" method doesn't seem to be getting hit as I'm debugging.
Can someone please tell me what I'm doing incorrecty?
Controller:
public class HomeController : Controller
{
private DAL db = new DAL();
public ActionResult Index()
{
ViewBag.Message = "Welcome to YeagerTech!";
return View();
}
// GET: Categories/Create
public ActionResult Create()
{
return View();
}
// POST: Categories/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(Category category)
{
if (ModelState.IsValid)
{
try
{
await db.AddCategoryAsync(category);
}
catch (System.Exception ex)
{
throw ex;
}
}
return View(category);
}
public PartialViewResult ShowDetails()
{
//string code = Request.Form["txtCode"];
Category cat = new Category();
//foreach (Product p in prodList)
//{
// if (p.ProdCode == code)
// {
// prod = p;
// break;
// }
//}
cat.CategoryID = 1;
cat.Description = "Financial";
return PartialView("_ShowDetails", cat);
}
}
Parent View
#model Models.Models.Category
#{
ViewBag.Title = "Create Category";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create Category</h2>
#using (Ajax.BeginForm("ShowDetails", "Home", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "div1",
InsertionMode = InsertionMode.Replace,
OnSuccess = "OnSuccess",
OnFailure = "OnFailure"
}, new { #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<div class="body-content">
<h4>Category</h4>
<hr />
<div class="form-group">
<div class="col-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control", #placeholder = "Description" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
<button type="submit" id="btnCategoryCreate" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Create</button>
</div>
</div>
</div>
}
<div id="div1">
</div>
#*<div>
#Html.ActionLink("Back to List", "Index")
#Html.Hidden("categoryCreateUrl", Url.Action("Create", "Home"))
</div>*#
#section Scripts {
<script>
$(document).ready(function ()
{
function OnSuccess(response)
{
$('#form1').trigger("reset");
}
//if (typeof contentCreateCategory == "function")
// contentCreateCategory();
});
</script>
}
Partial View
#model Models.Models.Category
<h1>Cat Details</h1>
<h2>
Cat Code: #Model.CategoryID<br />
Cat Name: #Model.Description<br />
</h2>
EDIT # 1
Parent & child view displayed (due to a missing JS file, thanks to the mention of Stephen), plus was able to programmatically clear out the form with the OnSuccess method.
I had thought since that was JS, it needed to go in the Scripts section, but did not recognize it there.
Here is the finished code.
#using (Ajax.BeginForm("ShowDetails", "Home", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "div1",
InsertionMode = InsertionMode.Replace,
OnSuccess = "OnSuccess",
OnFailure = "OnFailure"
}, new { #id = "frm1", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<div class="body-content">
<h4>Category</h4>
<hr />
<div class="form-group">
<div class="col-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control", #placeholder = "Description" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
<button type="submit" id="btnCategoryCreate" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Create</button>
<button type="reset" id="btnClear" class="btn btn-default"><span class="glyphicon glyphicon-eye-close"></span>Clear</button>
</div>
</div>
</div>
}
<div id="div1">
</div>
<script type="text/javascript">
function OnSuccess(response)
{
$('#frm1').trigger("reset");
}
function OnFailure(response)
{
alert("Whoops! That didn't go so well did it?");
}
</script>
A bit late for answer, but yet it might help someone else.
The issue might be that the javascript files required for Ajax.BeginForm are not loaded in your page.
Microsoft.jQuery.Unobtrusive.Ajax
Nuget package to search for
<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net45" />
of course that the version might differ.
Add reference to the page after your jQuery and it should work.
i have follow the following wave for autocomplete and datepicker but the auto complete can't work Secondly is there any razor syntax to show the datepicker and autocomplete
javascriptfile
/// <reference path="jquery-1.5.1-vsdoc.js" />
/// <reference path="jquery-ui-1.8.11.js" />
$(document).ready(function () {
$(":input[data-autocomplete]").each(function () {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
$(":input[data-datepicker]").datepicker();
})
The View File
#model TestDateTimePicker.Models.TestClass
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>TestClass</legend>
<div class="editor-label">
#Html.LabelFor(model => model.City)
</div>
<div class="editor-field">
<input data-autocomplete="#Url.Action("AutoComplete", "City","City")" class="text-box single-line" id="City" name="City" type="text" value="" />
#Html.ValidationMessageFor(model => model.City)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Date)
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" type="text" value="" data-datepicker="true"/>
#Html.ValidationMessageFor(model => model.Date)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
The Json Controller
public ActionResult AutoComplete(String s)
{
var d = db.Cities
.Where(r => r.Name.Contains(s))
.Select(r => new { label = r.Name });
return Json(d, JsonRequestBehavior.AllowGet);
}
#Url.Action("AutoComplete", "City", "City")
should be
#Url.Action("AutoComplete", "City")
The third argument that you are using represents route values which must be an anonymous object and not a string. As far as the autocomplete plugin is concerned, it uses the term query string when performing the AJAX request to fetch the data. So you will have to rename your controller action parameter as well:
public ActionResult AutoComplete(string term)
{
var d = db.Cities
.Where(r => r.Name.Contains(term))
.Select(r => new { label = r.Name });
return Json(d, JsonRequestBehavior.AllowGet);
}
Also make sure that that jquery-ui-1.8.11.min.js script is referenced in your page (cannot see it in your code example).
If it still doesn't work make sure that the AutoComplete action doesn't throw an exception when performing the query. Also look with FireBug or Developer Tools if there aren't some javascript errors and if the AJAX request is correctly sent.
The key to this solution is: We need to use item.label name because the AJAX will return the value in list format so we need to extract the value as shown in the below example.
<html>
<head>
<title>Ajax</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#myname").autocomplete({
source: 'emp.php',
select: function (event, ui) {
$("#myname").val(ui.item.label);
$("#myid").val(ui.item.id);
},
minLength: 0,
autoFocus: true,
});
});
</script>
</head>
<body>
<h2>Ajax Testing</h2>
<input name="myname" id="myname" type="text">
<input name="myid" id="myid" type="text">
</body>
</html>
-------------- Below is the code of PHP for emp.php page --------------------------
<?php
require_once 'connection.php';
$query = "SELECT myname as label , myid as id FROM emp WHERE name LIKE ? ORDER BY name";
$rsTable = sqlsrv_query($conn, $query,array('%'.$_REQUEST['term'].'%'));
while ($row_rsTable = sqlsrv_fetch_array($rsTable, SQLSRV_FETCH_ASSOC)) {
$emparray[] = preg_replace('/[\x00-\x1F\x80-\xFF]/', '', $row_rsTable);
}
echo json_encode($emparray);
sqlsrv_close($conn);
?>
This works for me but how do I do the same thing using html.dropdownlist?
Notice that the value passed is not the value that is shown to the user.
#model IEnumerable<MVR.Models.ViewIndividual>
<h2>Level1</h2>
<select>
#foreach (var item in Model) {
<option value="#item.Case_Number">#item.Patient_Lastname ,
#item.Patient_Firstname
</option>
}
</select>
As always in an ASP.NET MVC application you start by defining a view model:
public class MyViewModel
{
public string SelectedIndividual { get; set; }
public SelectList Individuals { get; set; }
}
then you write a controller action that populates this view model from some data source or something:
public ActionResult Index()
{
// TODO : fetch those from your repository
var values = new[]
{
new { Value = "1", Text = "item 1" },
new { Value = "2", Text = "item 2" },
new { Value = "3", Text = "item 3" },
};
var model = new MyViewModel
{
Individuals = new SelectList(values, "Value", "Text")
};
return View(model);
}
and finally you have a strongly typed view using strongly typed helpers:
#model MyViewModel
#Html.DropDownListFor(
x => x.SelectedIndividual,
Model.Individuals
)
This being said, because I see that you are not using any view models in your application, you could always try the following ugliness (not recommended, do this at your own risk):
#model IEnumerable<MVR.Models.ViewIndividual>
<h2>Level1</h2>
#Html.DropDownList(
"SelectedIndividual",
new SelectList(
Model.Select(
x => new {
Value = x.Case_Number,
Text = string.Format(
"{0}, {1}",
x.Patient_Lastname,
x.Patient_Firstname
)
}
),
"Value",
"Text"
)
)
Of course such pornography is not something that I would recommend to ever write in a view and I wouldn't recommend even to my worst enemies.
Conclusion: In an ASP.NET MVC application you should always be using view models and strongly typed views with strongly typed helpers (see first part of my answer).
Here is the full example
public class PageModel
{
[Display(Name = "Page ID")]
public Guid ID { get; set; }
[Display(Name = "Page Type ID")]
public Guid PageTypeID { get; set; }
[Display(Name = "Title")]
public string Title { get; set; }
[Display(Name = "Page Type Name")]
public string PageTypeName { get; set; }
[Display(Name = "Html Content")]
public string HtmlContent { get; set; }
public SelectList PageTypeList { get; set; }
}
the C# code
public ActionResult Edit(Guid id)
{
var model = db.Pages.Where(p => p.ID == id).FirstOrDefault();
var typeList = new SelectList(db.PageTypes.OrderBy(s => s.Name).ToList(), "ID", "Name");
var viewModel = new PageModel { PageTypeList = typeList };
viewModel.HtmlContent = model.HtmlContent;
viewModel.ID = model.ID;
viewModel.PageTypeID = Guid.Parse(model.PageTypeID.ToString());
viewModel.Title = model.Title;
return View(viewModel);
}
[HttpPost]
[ValidateInput(false)]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(PageModel page)
{
if (ModelState.IsValid)
{
var model = db.Pages.Where(p => p.ID == page.ID).FirstOrDefault();
model.Title = page.Title;
model.HtmlContent = page.HtmlContent;
model.PageTypeID = page.PageTypeID;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(page);
}
and lastly html
#model competestreet.com.Models.PageModel
#{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_LayoutCMS.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('#HtmlContent').ckeditor();
});
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ckeditor/adapters/jquery.js")" type="text/javascript"></script>
<h2 class="title">
<span class="text-cms">CM<span>S</span></span></h2>
<div class="box">
<div class="t">
</div>
<div class="c">
<div class="content">
<div class="main-holder">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Pages</li>
</ul>
</div>
<div id="content" style="min-height: 500px;">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Page Type - #Html.DropDownListFor(x => x.PageTypeID, Model.PageTypeList)
#Html.ValidationMessageFor(model => model.PageTypeID)</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title, new { #class = "text-box" })
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="clear">
</div>
<div class="editor-label">
#Html.LabelFor(model => model.HtmlContent)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.HtmlContent, new { #name = "Editor1", #class = "Editor1" })
#Html.ValidationMessageFor(model => model.HtmlContent)
</div>
<div class="clear">
</div>
<p>
<input type="submit" value="Save" class="input-btn" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
</div>
</div>
</div>
</div>
<div class="b">
</div>
</div>