Am working on asp.net MVC3. I need to use ckeditor in a partail view.
IN Controller:
public PartialViewResult Compose()
{
return PartialView();
}
and my view contains
<% using (Html.BeginForm()) { %>
<%: Html.TextArea("Body", signature , new { #class = "ckeditor", rows = "5", cols = "15"})%>
<% } %>
I am using ASP.NET MVC 3, the concept should be the same
First import all the library to the root folder of your project
otherwise some dependencies for file will be missing
Include this js file to your view
<script type="text/javascript" src="#Url.Content("~/ckeditor.js")"></script>
In Your controller do the following
public PartialViewResult Compose(){
return PartialView("CKeditor");
}
In Your view load the partial view with the script
#using (Html.BeginForm()){
#Html.TextArea("body", new { #id = "editor1", name = "editor1", rows = "30", cols = "100" })
}
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
Download the Source Code
Related
I'm new to mvc and have a little trouble figuring out how to upload files to the server .
I have a form where the user enters name , address, city , upload files.
The user must be able to upload max 3 files . After the user has selected eg . 2 files , we display immediately files names on the form like this:
Uploaded files:
gif.dk
hitme.gif
BUT the selected files should ONLY be uploaded to the server after the form is submitted to server.
You can display a list of files to be uploaded by subscribing to the change event of the upload control in jQuery.
Controller:
public class UploaderController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file != null && file.ContentLength > 0)
{
file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));
}
}
return View("Index");
}
}
View:
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#uploadFiles').on("change", function () {
var fileUpload = $(this);
var files = fileUpload.context.files;
$("#files").empty();
$("#files").append("<h3>List of files to be uploaded:</h3>");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var name = file.name;
var div = "<div>File name:" + name + "</div>";
$("#files").append(div);
}
});
});
</script>
</head>
<body>
#using (Html.BeginForm("Multiple", "Uploader", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="multiple">
<input id="uploadFiles" type="file" class="multiple" name="files" multiple />
</div>
<button class="btn btn-default">Upload</button>
<div id="files">
</div>
}
</body>
Output:
It is just indication of files which you have selected for upload.
But files will be upload to server only after you submit form.
Error:-
Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'.
My Main page View is this
{
ViewBag.Title = "Start";
}
<h2>Start</h2>
<script type="text/javascript">
$(document).ready(function () {
$("#test1").click(function (e) {
$("#firstpartialview").css("display", "none");
$("#secondpatialview").css("display", "none");
$("#firstpartialview").css("display", "block");
});
$("#test2").click(function (e) {
$("#firstpartialview").css("display", "none");
$("#secondpatialview").css("display", "none");
$("#secondpatialview").css("display", "block");
});
});
</script>
<a id="test1"></a>
<a id="test2"></a>
<div id="firstpartialview">#Html.Action("FirstView", "Home") </div>
<div id="secondpatialview">#Html.Action("SecondView", "Home") </div>
My controller is this:-
public ActionResult Start()
{
return View();
}
public ActionResult FirstView()
{
ModelA objA = new ModelA();
return PartialView(objA);
}
public ActionResult SecondView()
{
ModelB objB = new ModelB();
return PartialView(objB);
}
My Partial View is this
_partialA.cshtml
#model demo3.Models.ModelA
#{
ViewBag.Title = "_partialA";
}
<h2>_partialA</h2>
<div>#Html.EditorFor(m => m.EmployeeId) </div>
<div>#Html.EditorFor(m => m.EmployeeName)
and another partial view is this
_partialB.cs.html
#model demo3.Models.ModelB
#{
ViewBag.Title = "_partialB";
}
<h2>_partialB</h2>
<div>#Html.EditorFor(m => m.Comapny) </div>
<div>#Html.EditorFor(m => m.FisacalYear) </div>
Please help me to solve the error..on browser this error is coming
The partial view 'FirstView' was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/Home/FirstView.aspx
~/Views/Home/FirstView.ascx
~/Views/Shared/FirstView.aspx
~/Views/Shared/FirstView.ascx
~/Views/Home/FirstView.cshtml
~/Views/Home/FirstView.vbhtml
~/Views/Shared/FirstView.cshtml
~/Views/Shared/FirstView.vbhtml
The error means that mvc is trying to load a file (by default, if you haven't specified the view file name, it checks by Action name which in this case, is FirstView), but it can't find it.
You can specify the view file name in your return statement:
return PartialView(string "View", object model)
This can be used like so (assuming _partialA is your view's cshtml filename):
return PartialView("_partialA", objA);
The error is quite specific. This line is causing your error:
<div id="firstpartialview">#Html.Action("FirstView", "Home") </div>
It can't find the view FirstView. You need to place the view in one of the locations that the error message tells you or change where the view engine searches for your views.
Say I have a partial view that renders a dropdown list of Applications. When selecting an item in the dropdown it renders another partial view.
This dropdown list exists in a few places in the application but on each page a different partial view needs to be rendered when selecting an application. Is there an easy way to make the dropdown reusable? ie I need to set a different data_url depending on which page the partial view is rendered.
Partial View:
<script type="text/javascript">
$(function () {
$('#ApplicationsDropdownList').change(function () {
var url = $(this).data('url');
var applicationId = $(this).val();
$('#RolesForApplication').load(url, { applicationId: applicationId})
});
});
</script>
<div>
<label for='ApplicationsDropdownList'>Application:</label>
#Html.DropDownListFor(
x => x.SelectedApplicationId,
new SelectList(Model.Applications, "Value", "Text"),
"-- Select Application --",
new
{
id = "ApplicationsDropdownList",
data_url = Url.Action("ViewRolesTableForApplication", "Index")
}
)
</div>
Controller:
public ActionResult ViewRolesTableForApplication(string applicationId)
{
...
return View("_RolesTableForApplicationPartial");
}
You could add a string property containing the data_url to the model that you use for your partial view.
So in addition to the Model containing Applications it will have public string DataUrl { get; set; } as well.
Please see Darin's solution here .. Converting HTML.EditorFor into a drop down (html.dropdownfor?)
I am not able to make the drop down list work. Can any help with this please. Thank you.
I am getting BC30203 error in my ascx page.
BC30203: Identifier expected. (Line 4 - new[] ).. What do I put in place of model. I tried putting the actual model name and may be I am getting the syntax wrong.. this code goes in the editor template according to the posted solution link above...
Code:
<%= Html.DropDownList(
"",
new SelectList(
new[]
{
new { Value = "true", Text = "Yes" },
new { Value = "false", Text = "No" },
},
"Value",
"Text",
Model
)
) %>
No idea why you are getting such error, the code should work. The following editor template works perfectly fine for me, I have just tested it:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.DropDownList(
"",
new SelectList(
new SelectListItem[]
{
new SelectListItem { Value = "true", Text = "Yes" },
new SelectListItem { Value = "false", Text = "No" }
},
"Value",
"Text",
Model
)
) %>
with the following model:
public class MyViewModel
{
[UIHint("YesNoDropDown")]
public bool IsActive { get; set; }
}
controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
}
and view:
<%# Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>"
%>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.EditorFor(model => model.IsActive) %>
</asp:Content>
I want to display all the images in my image's folder.
This is my code :
<%
string dir = Server.MapPath("Content/slideshow/images");
string[] files;
int numFiles;
files = System.IO.Directory.GetFiles(dir);
numFiles = files.Length;
for (int i = 1; i < numFiles; i++)
{
%>
<i><a href="#">
<img src="/Content/slideshow/images/image<%= i %>.jpg" alt="" height="239px" width="930px" />
</a></i>
<% }%>
When I code like this, it display only the images that have the name "image"+blah blah blah . But I want to render all images in different name in a folder.
Can anyone solve this?
I would suggest you using view models to achieve this. So let's start by defining such:
public class ImageViewModel
{
public string Url { get; set; }
}
then we could have a controller action which will populate this view model (or precisely a collection of it):
public class ImagesController: Controller
{
[ChildActionOnly]
public ActionResult Images()
{
var appData = Server.MapPath("~/Content/slideshow/images");
var images = Directory.GetFiles(appData).Select(x => new ImageViewModel
{
Url = Url.Content("~/Content/slideshow/images/" + Path.GetFileName(x))
});
return PartialView(images);
}
}
then we could define a corresponding partial view (~/Views/Shared/Images.ascx):
<%# Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ImageViewModel>>"
%>
<%= Html.DisplayForModel() %>
next a corresponding display template which will be rendered for each image (~/Views/Shared/DisplayTemplates/ImageViewModel.ascx):
<%# Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<ImageViewModel>"
%>
<img src="<%= Model.Url %>" alt="" height="239px" width="930px" />
and the final part that's left is to include this child action somewhere in a view or a master page:
<%= Html.Action("Images", "Images") %>
public DisplayImages()
{
System.IO.DirectoryInfo dir = new System.IO.DirectoryInfo(Location);
foreach (System.IO.FileInfo f in dir.GetFiles("*.*"))
{
//Do Something
}
}