I am working in Asp.Net Core Mvc Signalr. My system works like below image but connectionid changes every refresh all in another browser. I want to use constant connection id for all users and store this connection id and user's id in database . How Can I use Constant connection Id.
Here is my js code
"use strict";
$(document).ready(() => {
var connection = new signalR.HubConnectionBuilder().withUrl("/chathub").build();
connection.on("connected", connecitonid => $("#connectionId").html(connecitonid));
connection.start();
$("button").click(() => {
let message = $("#txtMessage").val();
var user = $("#sender").val();
connection.invoke("ClientSendMessage", $("#client").val(),user, message)
.catch(error => console.log("Error." + error));
var div = document.createElement("div");
div.textContent = "me" + ":" + message;
document.getElementById("son").appendChild(div);
});
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + ":" + msg;
var div = document.createElement("div");
div.textContent = encodedMsg;
document.getElementById("son").appendChild(div);
});
});
Here is my hub class
using MentorShip.Models;
using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace MentorShip.Hubs
{
public class SignalRChat:Hub
{
public async Task ClientSendMessage(string connectionId,string user, string message)
{
await Clients.Client(connectionId).SendAsync("ReceiveMessage",user, message);
}
public async override Task OnConnectedAsync()
{
await Clients.Caller.SendAsync("connected", Context.ConnectionId);
}
}
}
Here is my html code
<div class="container">
<div class="row"><h5>Connection ID : <span id="connectionId"></span></h5></div>
<div class="row">
<div class="col-md-7"><input type="text" id="sender" value="Sender Name"></div>
</div>
<div class="row">
<div class="col-md-7"><input type="text" placeholder="ReceiverId" id="client"></div>
</div>
<div class="row">
<div class="col-md-7"> <input type="text" id="txtMessage"> <button>Send</button></div>
</div>
<div class="row">
<div class="col-md-7" id="son"> </div>
</div>
</div>
Here is how code works
This connection id every time changes
Related
UserAdmin.cshtml
<div class="modal-body">
<form id="upload-file-dialog-form"
class="needs-validation form-group" novalidate
onsubmit="UploadFile()"
enctype="multipart/form-data"
method="post">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<input type="file" name="file_Uploader" />
</div>
<div class="form-group">
<div class="col-md-10 modal-footer">
<input type="submit" class="btn btn-primary" value="Upload"/>
</div>
</div>
</form>
</div>
UserAdmin.js
function UploadFile() {
var form = $('form')[0];
var formData = new FormData(form);
console.log(formData);
$.ajax({
url: '/API/Upload',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (data) {
},
error: function () {
}
});
}
Controller
[HttpPost]
public async Task<IActionResult> Upload(List<IFileUpload> files)
{
try
{
var check = (HttpContext.Request.Form.Files);
long size = files.Sum(f => f.Length);
//some code removed
return Ok(new { count = files.Count, size, filePaths });
}
catch (Exception exc)
{
logger.Error("Error in upload() " + exc.Message);
throw;
}
}
the files in controller is always 0.
If onsubmit="UploadFile()" is replaced with
asp-controller="API" asp-action="Upload"
then I get something in check but again converting it to List of IFileUpload is another blocker
First of all, If you want to upload multiple files you have to add multiple="multiple" in your input. FormData will be empty if you print it like this, you have to iterate through the items.
<input type="file" name="file_Uploader" multiple="multiple" />
Please follow the codes below, I tested it working.
Complete form
<form id="upload-file-dialog-form"
onsubmit="UploadFile(event)">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<input type="file" name="file_Uploader" multiple="multiple" />
</div>
<div class="form-group">
<div class="col-md-10 modal-footer">
<input type="submit" class="btn btn-primary" value="Upload" />
</div>
</div>
</form>
Construct form data like below
<script>
function UploadFile(e) {
e.preventDefault();
var formData = new FormData($('#upload-file-dialog-form')[0]);
$.each($("input[type='file']")[0].files, function(i, file) {
formData.append('files', file);
});
$.ajax({
url: '/API/Upload',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(data) {
},
error: function() {
}
});
}
</script>
Action method
[HttpPost]
public async Task<IActionResult> Upload(List<IFormFile> files)
{
try
{
var check = (HttpContext.Request.Form.Files);
long size = files.Sum(f => f.Length);
return Ok(new { count = files.Count, size });
}
catch (Exception exc)
{
_logger.LogWarning("Error in upload() " + exc.Message);
throw;
}
}
In model class, use IFormFile
public List<IFormFile> file_Uploader {get;set;}"
In controller， change the parameter like this
public async Task<IActionResult> Upload(List<IFormFile> file_Uploader)
add multiple to upload more files, and keep the name attribute the same as parameter to post value, code like below:
<input type="file" name="file_Uploader" multiple/>
result:
This is structure of my App and i want to call a method in Login.cshtml from ExternalLogins.cshtml.cs class. How can I do that? Some asp helpers?
Login just like ExternalLogins is RazorPage - no controller class.
Edit:
#mj1313 I added this code:
<div class="col">
<h3>Zaloguj się przez:</h3>
#{
if (Model.ExternalLogins.Count == 0)
{
<div>Brak możliwości zalogowania przez serwisy zewnętrzne.</div>
}
else
{
<form method="post"
asp-page="./Manage/ExternalLogins"
asp-page-handler="LinkLogin"
asp-route-returnUrl="#Model.ReturnUrl">
<div>
#foreach (var provider in #Model.ExternalLogins)
{
<button type="submit"
class="btn btn-primary"
name="provider"
value="#provider.Name"
title="Zaloguj się za pomocą konta
#provider.DisplayName">
#provider.DisplayName
</button>
}
</div>
</form>
}
}
</div>
But my Action in ExternalLogins not called
public async Task<IActionResult> OnPostLinkLoginAsync(string provider)
{
// Clear the existing external cookie to ensure a clean login process
await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
// Request a redirect to the external login provider to link a login for the current user
var redirectUrl = Url.Page("./ExternalLogins", pageHandler: "LinkLoginCallback");
var properties = _signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl, _userManager.GetUserId(User));
return new ChallengeResult(provider, properties);
}
I'm using Recaptcha in my MVC4 web app. It was working correctly when it was embedded in the form but when I moved the #Html.Raw(Html.GenerateCaptchaHelper()) to partial view and trying to call this partial view via ajax request, it doesn't work!
Extension code :
public static string GenerateCaptchaHelper(this HtmlHelper helper)
{
var captchaControl = new Recaptcha.RecaptchaControl
{
ID = "recaptcha",
Theme = "clean",
PublicKey = ************,
PrivateKey = **********************,
Language = "En"
};
var htmlWriter = new HtmlTextWriter(new StringWriter());
captchaControl.RenderControl(htmlWriter);
return htmlWriter.InnerWriter.ToString();
}
my partial view is has the code like :
<p>#Html.Raw(Html.GenerateCaptchaHelper())</p>
and inside my controller
public PartialViewResult Captcha()
{
return PartialView();
}
and inside my main view:
#using (Html.BeginForm("Login", "Account", new { returnUrl = ViewData["ReturnUrl"] }, FormMethod.Post,null))
{
#Html.AntiForgeryToken()
<form role="form">
<div class="form-group">
<label>#Html.LabelFor(m => m.Email)</label><br />
#Html.TextBoxFor(m => m.Email, null, new { #class = "form-control", autocomplete = "off" })
</div>
<div class="form-group">
<label>#Html.LabelFor(m => m.Password)</label><br />
#Html.PasswordFor(m => m.Password, new { #class = "form-control", autocomplete = "off" })
</div>
<div id="captchaView" class="form-group">
</div>
<button type="submit">Login</button>
</div>
</div>
</form>
}
and the javascript is :
$.ajax({
url: '/Account/Captcha',
type: 'GET',
success: function(data) {
$('#captchaView').html(data);
}
});
Could you please help me to figure out why?
I have a single page with multiple partials set up. I want to be able to validate and update each partial seperatly. The validation works BUT when I type in a correct value and press save the page goes to the partial view instead of staying on the single page. What am I doing wrong here?
This is my main page :
#for (var i = 0; i < 10; i++)
{
var idTest = "Test_" + i;
<div id="#idTest">
#Html.Action("Detail", new { id = i })
</div>
}
The partial is created like this:
#{
var idTest = "Test_" + Model.Id;
var ajaxOptions = new AjaxOptions
{
UpdateTargetId = #idTest,
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace
};}
#using (Ajax.BeginForm("Detail", ajaxOptions))
{ #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.Gemeente, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Gemeente, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Gemeente, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
This is the simple model:
public class Test
{
public int Id { get; set; }
[Required(ErrorMessage = "Gelieve een gemeente op te geven")]
public string Gemeente { get; set; }
}
These are the actions:
[HttpGet]
public ActionResult Detail(int id)
{
Models.Test model = new Models.Test();
model.Id = id;
return View(model);
}
[HttpPost]
public ActionResult Detail(Models.Test model)
{
if(ModelState.IsValid)
{
return PartialView(model);
}
return PartialView(model);
}
Add these lines to your view and also use #Html.Partial as shown below
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
so that your main view is
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
#for (var i = 0; i < 10; i++)
{
var idTest = "Test_" + i;
<div id="#idTest">
#Html.Partial("Detail", new Test { Id = i })}
</div>
}
Scripts would be for unobtrusive ajax so that your ajax button works and Html.Partial so that first time when you load your page in foreach only partial view is rendered (not the full view)
Can you tell how to make a update in DB, using fileupload (File is updated ok) ?
I dont get any errors message, but the edit controller make a new row in DB, instead of updating the old row.
I have tried to remove insertOnsubmit, but only result is no update at all, in DB
I'am using LINQ to SQL MVC4
Table id - CompanyNameCon - PdfCon
Controller:
public ActionResult Edit(int id = 0)
{
DAT_SupplyCon SupplyCon = db.DAT_SupplyCons.Where(x => x.ID == id).FirstOrDefault();
if (SupplyCon == null)
{
return HttpNotFound();
}
return View(SupplyCon);
}
//
// POST: /Books/Edit/5
[HttpPost]
public ActionResult Edit(DAT_SupplyCon DAT_SupplyCon, HttpPostedFileBase file)
{
if (ModelState.IsValid)
{
// Delete old file
FileUpload.DeleteFile(DAT_SupplyCon.PdfCon);
// Upload our file
DAT_SupplyCon.PdfCon = FileUpload.UploadFile(file);
???? db.DAT_SupplyCons.InsertOnSubmit(DAT_SupplyCon);
db.SubmitChanges();
return RedirectToAction("Index");
}
return View(DAT_SupplyCon);
}
view
#model CFire2.Models.DAT_SupplyCon
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#using (Html.BeginForm("Edit", "SupplyCon", FormMethod.Post, new { enctype = "multipart/form- data" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>DAT_SupplyCon</legend>
<div class="editor-label">
#Html.LabelFor(model => model.SupplierCon)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SupplierCon)
#Html.ValidationMessageFor(model => model.SupplierCon)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.CompanyNameCon)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CompanyNameCon)
#Html.ValidationMessageFor(model => model.CompanyNameCon)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PdfCon)
</div>
<div class="editor-field">
<input type="file" name="file" />
#Html.HiddenFor(model => model.PdfCon)
#Html.ValidationMessageFor(model => model.PdfCon)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Utils:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
namespace CFire2.Utils
{
public static class FileUpload
{
public static char DirSeparator =
System.IO.Path.DirectorySeparatorChar;
public static string FilesPath = "Content" +
DirSeparator + "Uploads" + DirSeparator;
public static string UploadFile(HttpPostedFileBase file)
{
if (null == file) return "";
if (!(file.ContentLength > 0)) return "";
string fileName = file.FileName;
string fileExt = Path.GetExtension(file.FileName);
if (null == fileExt) return "";
if (!Directory.Exists(FilesPath))
{
Directory.CreateDirectory(FilesPath);
}
var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Content/SupplyCon"),fileName);
file.SaveAs(Path);
return fileName;
}
public static void DeleteFile(string fileName)
{
if (fileName.Length == 0) return;
var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Content/SupplyCon"), fileName);
if (File.Exists(Path.GetFullPath(path)))
{
File.Delete(Path.GetFullPath(path));
}
}
}
}
Add a hidden field for your primary key property to your form.
#Html.HiddenFor(model => model.ID)
Otherwise it'll be treated as a new record since no primary key is posted.
InsertOnSubmit method work on the basis of primary key .
if primary key value is not exists in DB it will create a new record otherwise it will update that record .
In your case you can use hidden field to store the primary key id into the model .
#Html.HiddenFor(model => model.PrimaryKeyID)