ASP.NET MVC Razor pass model to layout

Các  bước thực hiện:

  1. Add thuộc tính vào controller hoặc Base controller, ví dụ LayoutViewModel hoặc bất kỳ tên gì bạn muốn.
  2. Trong hàm dựng (Constructor của Controller), khởi tạo dữ liệu cho thuộc tính đó
  3. Gán cho ViewData hoặc ViewBag
  4. Trong Layout, ép kiểu hoặc sử dụng dữ liệu đó một cách phù hợp

Ví dụ Controller:

public class MyController : Controller
{
    public DataTable LayoutViewModel { get; set; }

    public MyController()
    {
        this.LayoutViewModel = new LayoutViewModel();
        this.LayoutViewModel = new LoadDataTable();

        this.ViewData["LayoutViewModel"] = this.LayoutViewModel;
    }

}

Trong Layout Page

@{
var viewModel = (DataTable)ViewBag.LayoutViewModel;
}

Sau khi chúng ta đã có biến viewModel chưa dữ liệu cần lấy, lúc đó kết gán hoặc hiển thị theo chúng ta muốn.

Advertisements

Broadcast real time when data change in database

Hướng dẫn dưới đây về việc broadcase real time khi có thay đổi dữ liệu trong cơ sở dữ liệu (broadcase realtime when data change in database).

Kỹ thuật liên quan để áp dụng bao gồm:

  • SignalR
  • SqlDependency class
  • Sql Service Broker

Các bước cài đặt

  • Thiết lập Sql Service Broker: ON

ALTER DATABASE MyDB SET ENABLE_BROKER;

  • Cài đặt và viết mã SignalR

Mở NuGet Package Manager Console  và gõ lệnh sau

install-package Microsoft.AspNet.SignalR

  • Thiết lập chuỗi kết nối

 

DefaultConnection” connectionString=”data source=SERVER-NAME;database=DATABASENAME;user id =USERID;password=PASSOWRD” providerName=”System.Data.SqlClient” />

 

  • Tạo SignalR Hub class và viết mã nguồn như sau (sử dụng SqlDependency)

[HubName(“notificationHub”)]
public class NotificationHub : Hub
{

Int16 totalNewMessages = 0;
Int16 totalNewCircles = 0;
Int16 totalNewJobs = 0;
Int16 totalNewNotification = 0;

[HubMethodName(“sendNotifications”)]
public void SendNotifications()
{
using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings[“DefaultConnection”].ConnectionString))
{
string query = “SELECT NewMessageCount, NewCircleRequestCount, NewNotificationsCount, NewJobNotificationsCount FROM [dbo].[Modeling_NewMessageNotificationCount] WHERE UserProfileId= 1”;
//(select max(UserProfileId) from [dbo].[Modeling_NewMessageNotificationCount])
connection.Open();
using (SqlCommand command = new SqlCommand(query, connection))
{
try {
command.Notification = null;
DataTable dt = new DataTable();
SqlDependency dependency = new SqlDependency(command);
dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);
if (connection.State == ConnectionState.Closed)
connection.Open();
var reader = command.ExecuteReader();
dt.Load(reader);
if (dt.Rows.Count > 0)
{
totalNewMessages = Int16.Parse(dt.Rows[0][“NewMessageCount”].ToString());
totalNewCircles = Int16.Parse(dt.Rows[0][“NewCircleRequestCount”].ToString());
totalNewJobs = Int16.Parse(dt.Rows[0][“NewJobNotificationsCount”].ToString());
totalNewNotification = Int16.Parse(dt.Rows[0][“NewNotificationsCount”].ToString());
}
connection.Close();
}
catch(Exception ex)
{
throw;
}
}
}

//Call function on Client
IHubContext context = GlobalHost.ConnectionManager.GetHubContext();
context.Clients.All.RecieveNotification(totalNewMessages, totalNewCircles, totalNewJobs, totalNewNotification);
}
private void dependency_OnChange(object sender, SqlNotificationEventArgs e)
{
if (e.Type == SqlNotificationType.Change)
{
NotificationHub nHub = new NotificationHub();
nHub.SendNotifications();
}
}
}

  • Mapping SignalR trong Startup.cs class
[assembly: OwinStartup("Testing", typeof(MyStartup))]
 public class MyStartup
 {
 public void Configuration(IAppBuilder app)
 {
 app.MapSignalR(); 
 }
 }
  • Start and Stop SqlDependency
Global.asax 
void Application_Start(object sender, EventArgs e)  
    { 
        // Code that runs on application startup 
        System.Data.SqlClient.SqlDependency.Start(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); 
    } 
     
    void Application_End(object sender, EventArgs e)  
    { 
        //  Code that runs on application shutdown 
        System.Data.SqlClient.SqlDependency.Stop(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); 
 
    }
  • Client code
 
    New Notifications 
    "Scripts/jquery-1.6.4.min.js"> 
    "Scripts/jquery.signalR-2.0.2.min.js">         
    "signalr/hubs"> 
    "text/javascript"> 
        $(function () {             
            // Declare a proxy to reference the hub. 
            var notifications = $.connection.notificationHub; 
            debugger; 
            // Create a function that the hub can call to broadcast messages. 
            notifications.client.recieveNotification = function (totalNewMessages, totalNewCircles, totalNewJobs, totalNewNotifications) { 
                // Add the message to the page.                 
                $('#spanNewMessages').text(totalNewMessages); 
                $('#spanNewCircles').text(totalNewCircles); 
                $('#spanNewJobNotifications').text(totalNewJobs); 
                $('#spanNewNotifications').text(totalNewNotifications); 
            }; 
            // Start the connection. 
            $.connection.hub.start().done(function () { 
                notifications.server.sendNotifications(); 
            }).fail(function (e) { 
                alert(e); 
            }); 
            //$.connection.hub.start();             
        }); 
     
  

Broadcast Realtime SQL data using SignalR


You have “spanNewMessages”>0 New Message Notification.
You have “spanNewCircles”>0 New Circles Notification.
You have “spanNewJobNotifications”>0 New Job Notification.
You have “spanNewNotifications”>0 New Notification.

 

Source: Microsoft

Bootstrap Dropdown menu is not working

Hướng dẫn dưới đây giúp khắc phục lỗi Bootstrap Dropdown không hoạt động (Bootstrap Dropdown menu is not working)

Khắc phục:

  1. Thứ tự file JS đặt trước file CSS trong phần head của trang
  2. Thứ tự file Jquery.js đặt trước bootstrap.js

src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js“>

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”>

<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#8221; integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

 

Cấu hình ckfinder với ckeditor

Hướng dẫn dưới đây cấu hình ckfinder với ckeditor trong ASP.NET MVC 5

Thiết lập CKEditor trong MVC View:

@section scripts
{

@Scripts.Render(“~/bundles/jqueryval”)
http://~/ckeditor/ckeditor.js
http://~/ckfinder/ckfinder.js

var editor = CKEDITOR.replace(‘Content’);
CKFinder.setupCKEditor(editor, ‘../ckfinder/’);

}

Cấu hình đường dẫn của ckfinder trong config.ascx

public override void SetConfig()
{
// Paste your license name and key here. If left blank, CKFinder will
// be fully functional, in Demo Mode.
LicenseName = “”;
LicenseKey = “”;

// The base URL used to reach files in CKFinder through the browser.
BaseUrl = “../ckfinder/userfiles/”;

Note: nếu lỡ quên copy ckfinder vào thư mục Bin của ứng dụng thì gặp lỗi sau

Could not load type ‘CKFinder.Connector.Connector’. Could not load type ‘CKFinder.Settings.ConfigFile’. Unknown server tag ‘CKFinder:Config’.

ASP.NET Webforms Authorization

Hướng dẫn dưới đây giúp thiết lập cấu hình AUTHENTICATION và AUTHORIZARION trong ASP.NET WebForms 4.5

Cấu hình file web.config trong thư mục gốc của ứng dụng

<location path=”Account”>
<system.web>
<authorization>
<allow users=”*”/>
</authorization>
</system.web>
</location>

<system.web>
<authentication mode=”Forms”>
<forms name=”ASPNETAUTH” loginUrl=”~/Account/Login”></forms>
</authentication>

<authorization>
<deny users=”?”/>
</authorization>

 

Cấu hình toolbar cho CKEditor

Bài viết này hướng dẫn các bạn cách Cấu hình toolbar cho CKEditor với toolbar cơ bản (basic toolbar)

Các bước thực hiện:

  1. Mở file config.js trong thư mục ckeditor
  2. Copy đoạn code sau chèn vào phía trên của file config.js

CKEDITOR.config.toolbar = [
[‘Styles’, ‘Format’, ‘Font’, ‘FontSize’],

[‘Bold’, ‘Italic’, ‘Underline’, ‘StrikeThrough’, ‘-‘, ‘Undo’, ‘Redo’, ‘-‘, ‘Cut’, ‘Copy’, ‘Paste’, ‘Find’, ‘Replace’, ‘-‘, ‘Outdent’, ‘Indent’, ‘-‘, ‘Print’],

[‘NumberedList’, ‘BulletedList’, ‘-‘, ‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’],
[‘Image’, ‘Table’, ‘-‘, ‘Link’, ‘Flash’, ‘Smiley’, ‘TextColor’, ‘BGColor’, ‘Source’]
];

3. Lưu và kiểm tra lại kết quả.