I have this controller and view:
public ActionResult DynamicView()
{
return View();
}
_
#model ChatProj.Models.GroupNumber
#{
ViewBag.Title = "DynamicView";
}
<h2>DynamicView</h2>
<fieldset>
<legend>Create a room</legend>
<div class="editor-label">
#Html.LabelFor(model => model.GroupId)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.GroupId)
#Html.ValidationMessageFor(model => model.GroupId)
</div>
<input type="submit" value="DynamicView" />
</fieldset>
This is what it looks like on the page.
That's fine and dandy, but I would like to pass that number to a controller, which then passes it to a view. I would like to pass it to this view:
#using PagedList.Mvc;
#using ChatProj.App_Code;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Grupprum 1";
}
<h2>Grupprum 1</h2>
<style>
ul {list-style-type:circle;}
</style>
<div class="container">
<div class="nano chat">
<div class="content">
<ul id="discussion">
</ul>
</div>
</div>
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" disabled="disabled" />
<input type="hidden" id="displayname" />
</div>
#section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-1.1.3.js"></script>
<script src="~/Scripts/jquery.nanoscroller.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
$(".nano").nanoScroller();
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
$(document).ready(function () {
$("#sendmessage").removeAttr("disabled");
$('#message').keypress(function (e) {
if (e.keyCode == 13)
$('#sendmessage').click();
});
});
// Get the user name and store it to prepend to messages.
// Set initial focus to message input box.
$('#message').focus();
$.connection.hub.qs = { "room": "Grupprum 1" };
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
Specifically I would want it at $.connection.hub.qs = { "room": "Grupprum 1" }; to replace the 1.
So I've created these controllers which are faulty and incomplete:
[HttpPost]
public ActionResult DynamicView(int? roomNumber)
{
return View(GroupRoom(roomNumber));
}
public ActionResult GroupRoom(int roomNumber)
{
return View();
}
Does anyone know how I should change my controllers and views so that I'm able to insert a number in my DynamicGroup view, and get a view back based on the inserted number and the lastly mentioned view?
You could pass the number from the model to the new action just how #Matt Bodily did. But if you want to use a different model on your new view, you can use the below code instead:
public ActionResult GroupRoom(int roomNumber)
{
ViewBag.RoomNumber = roomNumber;
return View();
}
This way, you can use a different model for this page, if you want to. To display this ViewBag on the page, use this code anywhere you want:
#ViewBag.RoomNumber
I hope that helps you out.
How you have it set up the Model.GroupID will be set on the first view so change your controller like this
[HttpPost]
public ActionResult DynamicView(GroupNumber model)
{
//model.GroupId here will be what was selected on the first view
return RedirectToAction("GroupRoom", "Controller", new { GroupId = model.GroupId });
}
public ActionResult GroupRoom(int GroupId)
{
var model = //build your model based on the selected GroupId
return View(model);
}
Related
I am making a bulletin board system using CKEditor. Most of the features work just fine, but when editing an existing post, the all line breaks in the text are removed from the code block.
Image of create a post
Image of edit a post
Image of part of the response source
I googled as much as possible to solve this problem, but the methods I found were to no avail, so I removed it from the code again.
It seems that line breaks are removed while processing the source internally in CKEditor5, is there any way?
Replace all line breaks with <br /> tags.
Add /\r|\n/g to protectedSource
The following is the view file for that feature.
#model BBSArticleWriteView
#{
// Action name of the current view
var thisActionString = #ViewContext.RouteData.Values["action"].ToString();
if (Model.ArticleId == null)
ViewData["Title"] = "Writing";
else
ViewData["Title"] = "Editing";
}
<p class="page-header">#ViewData["Title"]</p>
<form asp-action="#thisActionString" id="editor-form">
<input asp-for="ArticleId" value="#Model.ArticleId" hidden />
<div>
<input asp-for="Title" required placeholder="Please enter a title." class="form-control w-100 mb-2" />
</div>
<div>
<textarea name="Contents" id="editor">
#Html.Raw(Model.Contents)
</textarea>
</div>
<div>
<input class="btn btn-sm btn-primary" type="submit" value="Save" onsubmit="Editor.submit()" />
<button class="btn btn-sm btn-primary" type="button" href="##" onclick="history.back()">Back</button>
</div>
</form>
<style>
.ck-editor__editable_inline {
min-height: 400px;
}
</style>
#section Scripts {
<script src="~/lib/ckeditor5/ckeditor.js" asp-append-version="true"></script>
<script>
class Editor{
static submit() {
return true;
}
}
ClassicEditor
.create(document.querySelector('#editor'),
{
simpleUpload:{
uploadUrl: "#Url.Action(nameof(CreatorFront.Controllers.FileController.Upload), "File")",
withCredentials: true
},
protectedSource:[
/\r|\n/g
]
})
.catch(error => {
console.error(error);
});
</script>
}
And here is the controller action that puts data into the view model.
[HttpGet]
public async Task<IActionResult> BBSEdit(int id)
{
var user = await _userManager.GetUserAsync(HttpContext.User);
if(user == null)
{
return RedirectToAction("Index", "Home");
}
var article = _cContext.BBSArticle.First(a => a.ArticleId == id);
if(article == null)
{
return RedirectToAction(nameof(BBSList));
}
if(user.Id != article.UserId)
{
return RedirectToAction(nameof(BBSList));
}
var model = new BBSArticleWriteView();
CopyProperties(model, article);
return View(nameof(BBSWrite), model);
}
The following is a function that puts content data in DB.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> BBSWrite(BBSArticleWriteView article)
{
if(ModelState.IsValid)
{
var user = await _userManager.GetUserAsync(HttpContext.User);
if(user == null)
{
RedirectToAction("Index", "Home");
}
// XSS attacks prevent
article.Contents = _htmlSanitizer.Sanitize(article.Contents);
var currentDateTime = DateTime.Now;
CreatorLib.Models.BBS.BBSArticle data = new CreatorLib.Models.BBS.BBSArticle()
{
ArticleId = _cContext.BBSArticle.Max(a => a.ArticleId) + 1,
MainCategory = article.MainCategory,
SubCategory = article.SubCategory,
UserId = user.Id,
Title = article.Title,
Contents = article.Contents,
Status = CreatorLib.Models.BBS.ArticleStatus.A,
IpAddress = HttpContext.Connection.RemoteIpAddress.ToString(),
RegisteredTime = currentDateTime,
LastUpdatedTime = currentDateTime,
HasMedia = article.HasMedia
};
_cContext.BBSArticle.Add(data);
await _cContext.SaveChangesAsync();
return RedirectToAction(nameof(BBSList));
}
return View(article);
}
Here, it is confirmed that HtmlSanitizer has absolutely no impact on this issue.
In DB, line breaks are fully preserved.
I am using asp.net core 3.1 with Razor forms.
I have a form that contains an input of type file and it is multiple files input.
In the create form it is easy to access the file from the model.
The problem is in the update form how can handle the preview, delete adding new files to the multiple
file input.
Is there a best practice to solve such thing.
The problem is in the update form how can handle the preview, delete adding new files to the multiple file input. Is there a best practice to solve such thing.
I suggest that you could use jQuery MultiFile.
Here are the steps:
1.Download the jQuery MultiFile:https://multifile.fyneworks.com/#Install
2.Find the download zip file and extract it then move to the project wwwroot/lib folder:
For asp.net core mvc:
View:
<form asp-controller="Home" asp-action="UploadData" enctype="multipart/form-data">
<div>
<input type="file" name="files" multiple="multiple" class="multi with-preview" />
<input type="submit" value="Upload" />
</div>
</form>
#section Scripts
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}
Controller:
[HttpPost]
public IActionResult UploadData(List<IFormFile> files)
{
//do your stuff...
return Ok();
}
For asp.net core razor pages:
Index.cshtml:
#page
#model IndexModel
<form asp-page-handler="UploadData" enctype="multipart/form-data">
<div>
<input type="file" name="files" multiple="multiple" class="multi with-preview" />
<input type="submit" value="Upload" />
</div>
</form>
#section Scripts
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}
Index.cshtml.cs:
public class IndexModel : PageModel
{
public IActionResult OnGet()
{
return Page();
}
public IActionResult OnPostUploadData(List<IFormFile> files)
{
return Page();
}
}
Result:
I've been using bootstrap4 file input!
to load the images when updating the form I used the following way:
var filesArray = [];
$(document).ready(function ()
{
$("#photos").fileinput("refresh",
{
showUpload: false,
showRemove: false
});
loadPhotos();
setTimeout(function ()
{
if (filesArray.length > 0)
{
$(".file-drop-zone-title").remove();
$('#photos').fileinput('readFiles', filesArray);
}
}, 2500);
});
function loadPhotos()
{
//hddPhotos is a hidden input that I stored the images URLs in
var photosPath = $('#hddPhotos').val();
if (photosPath !== null && photosPath!=='')
{
var photos = jQuery.parseJSON($('#hddPhotos').val());
if (photos.length > 0)
{
var count = photos.length;
for (var i = 0; i < count; i++)
{
getBlobofImage(photos[i]);
}
}
}
}
function getBlobofImage(imagePath)
{
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", imagePath);
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function ()
{
blob = xhr.response;//xhr.response is now a blob object
filesArray.push(new File([blob], /[^/]*$/.exec(imagePath)[0]));
};
xhr.send();
}
I am trying to create a site that has partial implementation of Vue.js, I am looking at using Vue.js as from what I understand it does not require a SPA site like other JS frameworks and I believe this framework ticks the boxes required.
I have a basic form that I want to be used to Create, Update and Delete objects.
The data is received via a SAL which calls an API, all Create, Update and Delete calls will go through the same API.
I have been able to do a HttpGet and HttpPost to Get and Update the data and show it on a simple form.
However when I try to display just a blank form I get the following errors:
Error Received
The code I have is as followed:
.cshtml page
#model bms.accessbookings.com.Types.ViewModels.ShowVenueViewModel
#{
ViewData["Title"] = "Venue";
}
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="m-content">
<div class="row">
<div id="venueForm">
Venue ID: <input type="text" v-model="venue.venueId" />
<br/>
Venue Name: <input type="text" v-model="venue.venueName" />
<br/>
Address: <input type="text" v-
model="venue.address.addressLine1"/>
<br/>
Line 2: <input type="text" v-
model="venue.address.addressLine2"/>
<br/>
City: <input type="text" v-model="venue.address.city"/>
<button type="button" v-on:click="sendToServer"
style="padding: 0; border: none; background: none;
cursor: pointer;">
<i class="la la-save"></i>
</button>
</div>
</div>
</div>
</div>
#section Scripts {
<script src="/js/venueform.js" type="text/javascript"></script>
}
.cs ViewModel:
public class ShowVenueViewModel
{
public int VenueId { get; set; }
public string VenueName { get; set; }
public Address Address { get; set; }
}
Address element contains Line1, Line2, City etc
VenueController Get and Post:
[HttpGet]
[Route("GetVenue")]
public ShowVenueViewModel GetVenue(int venueId = 0)
{
ShowVenueViewModel viewModel = new ShowVenueViewModel
{
Address = new Address()
};
if (venueId > 0)
{
viewModel = _venueImplementation.GetShowVenueViewModel(venueId);
}
return viewModel;
}
[HttpPost]
[Route("SaveVenue")]
public ShowVenueViewModel SaveVenue([FromBody]ShowVenueViewModel venueViewModel)
{
return venueViewModel;
}
.js page:
$(document).ready(function() {
var venueId = window.location.pathname.substring(7);
const vm = new Vue({
el: '#venueForm',
data () {
return {
venue: {}
}
},
props: {
currentevent: Object
},
created() {
Object.assign(this.venue, this.currentevent || {});
},
mounted: function() {
axios.get('/venue/GetVenue', { params: { venueId: venueId } }).then(response => {
this.venue = response.data;
});
},
methods: {
sendToServer: function () {
var self = this;
console.log("Venue getting updated");
axios.post('/venue/SaveVenue', self.venue)
.then(response => {
this.venue = response.data;
console.log("Venue Updated");
});
}
}
});
});
At the moment if the venue has items it returns these items without a problem and displays them into the form, I can edit the inputs and "save" them which then returns the newly saved information (save functionality not yet connected to my BLL / SAL).
However when no Venue object is returned (empty) the form does not display at all, and so there is no way to enter details onto a blank form to "save" and create a new venue.
Still really new to vue.js and I find it hard to find guides that are not pointing to CLI or SPA style sites.
I may have a lot of things wrong here, but if there are any pointers to help me I would be very grateful.
Ok well the error you're getting comes from your template (.cshtml page). You need either to make sure venue.address always has a value, or, safer, test for the presence of venue.address.addressLine1 before displaying it.
When you get an error in a render function, vue can't tell you the line number. But you know it's in the template somewhere and it's generally not hard to find. Keep your templates short :-) (the one shown is fine).
I have a page with multiple forms, each as a partial. I want to post each partial on submit. If there are errors, I want the validation errors to show in the partial as part of the main page i.e. I don't want to just see the partial on it's own page if there are errors. Am I correct in saying this behavior is only possible with an ajax post? How would I return the model state errors WITHOUT an ajax post, just a normal form post?
Edit:
Still seeing the partial on it's own page
Partial -
#using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" }))
{
#Html.ValidationMessage("InvalidUserNamePassword")
<fieldset class="fieldset">
<div>
<label for="form-field-user_id">User ID</label>
<span>
#Html.TextBoxFor(x => x.Username, new { #class = "form-field__input form-field__input--text", #id = "form-field-user_id"})
</span>
</div>
</fieldset>
<div class="form-field__button">
<button id="loginButton" type="submit" class="button button--primary">Login</button>
</div>
}
<script>
$('#loginButton').click(function () {
$.ajax({
type: "POST",
url: '#Url.Action("Login", "Account")',
data: $('form').serialize(),
success: function (result) {
if (result.redirectTo) {
window.location.href = result.redirectTo;
} else {
$("#LoginForm").html(result);
}
},
error: function () {
$("#LoginForm").html(result);
}
});
});
</script>
Controller -
[HttpPost]
public ActionResult Login(LoginModel model)
{
if (!ModelState.IsValid)
{
return PartialView("~/Views/Account/_Login.cshtml", model);
}
return Json(new { redirectTo = Url.Action("Index", "Profile") });
}
Yes, you are correct in saying this behavior is only possible with an ajax post.
There are a few problems with your current script meaning that you will not get the desired results.
Firstly your button is a submit button meaning that it will do a normal submit in addition to the ajax call unless you cancel the default event (by adding return false; as the last line of code in your script). However it would be easier to just change the button type to type="button"
<button id="loginButton" type="button" class="button button--primary">Login</button>
The ajax call will now update the existing page, however it will add the returned partial inside the existing <form> element resulting in nested forms which is invalid html and not supported. Change your html to wrap the main views form in another element
<div id="LoginFormContainer">
#using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" }))
{
....
<button id="loginButton" type="button" class="button button--primary">Login</button>
}
</div>
and then modify the script to update the html of the outer element
success: function (result) {
if (result.redirectTo) {
window.location.href = result.redirectTo;
} else {
$("#LoginFormContainer").html(result); // modify
}
},
Finally, your rendering dynamic content so client side validation will not work for the returned form. Assuming your properties have validation attributes (for example the [Required] attribute on the Userame property), you need to reparse the validator after loading the content
var form = $('#LoginForm');
....
} else {
$("#LoginFormContainer").html(result);
// reparse validator
form.data('validator', null);
$.validator.unobtrusive.parse(form);
}
You noted that you have multiple forms on the page, in which case your ajax options should be
data: $('#LoginForm').serialize(),
or if your declare var form = $('#LoginForm'); as per the above snippet, then data: form.serialize(), to ensure you are serializing the correct form.
Side note: There is no real need to change the id attribute of the textbox (it will be id=Username" by default and you can simply use
#Html.LabelFor(x => x.UserName, "User ID")
#Html.TextBoxFor(x => x.Username, new { #class = "form-field__input form-field__input--text" })
or just #Html.LabelFor(x => x.UserName) of the property is decorated with [Display(Name = "User ID")]
I'm working a simple modal popup.My goal is to send dialog's information to another view.
My index view below.
<button id="modal-opener">Open</button>
<div id="dialog-modal">
#using (Ajax.BeginForm("Index",new AjaxOptions{UpdateTargetId = "ID",HttpMethod = "Post",OnSuccess = "onSuccess"}))
{
<div>
<fieldset>
<legend>Acount Information</legend>
<div id="editor-label">
#Html.LabelFor(a=>a.FirstName)
</div>
<div id="editor-field">
#Html.TextBoxFor(a=>a.FirstName)
#Html.ValidationMessageFor(a=>a.FirstName)
</div>
<div id="editor-label">
#Html.LabelFor(a=>a.LastName)
</div>
<div id="editor-field">
#Html.TextBoxFor(a=>a.LastName)
#Html.ValidationMessageFor(a=>a.LastName)
</div>
<p>
<input type="submit" value="submit"/>
</p>
</fieldset>
</div>
}
</div>
And my _Layout.cshtml is below:
<script>
$(function() {
$("#dialog-modal").dialog({
autoOpen: false,
width: 300,
height: 250,
show: {
effect: "blind",
duration:1000
},
hide: {
effect: "explode",
duration:1000
}
});
$("#modal-opener").click(function() {
$("#dialog-modal").dialog("open");
});
});
function onSuccess() {
$("#dialog-modal").dialog("close");
}
</script>
And my controller is below ,so I want to send FirstName and LastName to details view
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Person person)
{
return RedirectToAction("Details",person);
}
public ActionResult Details(Person person)
{
return View(person);
}
If you want to do full redirect rather than a partial postback, you will need to change this line:
#using (Ajax.BeginForm("Index",new AjaxOptions{UpdateTargetId = "ID",HttpMethod = "Post",OnSuccess = "onSuccess"}))
into
#using(Html.BeginForm("Index"))
If you just want to do the partial postback to the details view, then change the action on the from Index to details
#using (Ajax.BeginForm("Details",new AjaxOptions{UpdateTargetId = "ID",HttpMethod = "Post",OnSuccess = "onSuccess"}))
HTH