AjaxControlToolkit Editor Nesnesinde Resim Kullanımı

AjaxControlToolkit Editör nesnesi ASP.NET Webforms için oldukça güçlü bir yapıya sahip bir editördür. Halen yaptığım projelerde kullanmakta olduğum bu editörde resimde kullanabiliriz.Nasıl mı? Hadi yapalım.

Öncelikle webformumuzu şu şekilde tasarlayalım.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <h1>Makale Kaydet</h1>
        <div class="form-group">
            <label for="makalebas">Makale Başlığı</label>
            <asp:TextBox ID="txtbaslik" runat="server" class="form-control" placeholder="Makale Başlık"></asp:TextBox>
        </div>
        <div class="form-group">
            <label for="makalekateori">Makale Kategorisi</label>
            <asp:DropDownList ID="drplist" runat="server" class="form-control">
                <asp:ListItem Value="">Lütfen Seçiniz</asp:ListItem>
                <asp:ListItem>ASP.NET</asp:ListItem>
                <asp:ListItem>C#</asp:ListItem>
                <asp:ListItem>MVC</asp:ListItem>
                <asp:ListItem>VB</asp:ListItem>
                <asp:ListItem>Javascript</asp:ListItem>
            </asp:DropDownList>
        </div>
        <div class="form-group">
            <label for="detay">Makale Detay</label>
            <cc1:Editor ID="Editor1" runat="server" class="form-control" Height="300px"/>
        </div>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Makaleye Resim Ekle" class="btn btn-danger" OnClick="Button1_Click"/>
        <asp:FileUpload ID="resimupload" runat="server"  />
        <br />
        <asp:Label ID="lblmesaj" runat="server" ></asp:Label>
        <br />
        <asp:Button ID="btnkaydet" runat="server" Text="Kaydet" class="btn btn-primary" OnClick="btnkaydet_Click" />
    </form>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MakaleDbConnectionString %>" DeleteCommand="DELETE FROM [MakaleTablo] WHERE [id] = @id" InsertCommand="INSERT INTO [MakaleTablo] ([Mbaslik], [Mkategori], [Mdetay]) VALUES (@Mbaslik, @Mkategori, @Mdetay)" SelectCommand="SELECT * FROM [MakaleTablo]" UpdateCommand="UPDATE [MakaleTablo] SET [Mbaslik] = @Mbaslik, [Mkategori] = @Mkategori, [Mdetay] = @Mdetay WHERE [id] = @id">
        <DeleteParameters>
            <asp:Parameter Name="id" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Mbaslik" Type="String" />
            <asp:Parameter Name="Mkategori" Type="String" />
            <asp:Parameter Name="Mdetay" Type="String" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Mbaslik" Type="String" />
            <asp:Parameter Name="Mkategori" Type="String" />
            <asp:Parameter Name="Mdetay" Type="String" />
            <asp:Parameter Name="id" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
</body>
</html>


Kod bölümüne geçelim şimdi.

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public void resimboyutu(int xx, int yy, string dosyaadi)
    {
        Bitmap bmap = new Bitmap(dosyaadi);
        Bitmap bmpOut = new Bitmap(xx, yy);
        Graphics g = Graphics.FromImage(bmpOut);
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        g.DrawImage(bmap, 0, 0, xx, yy);
        bmap.Dispose();
        Bitmap imagee = new Bitmap(bmpOut, xx, yy);
        imagee.Save(dosyaadi, ImageFormat.Jpeg);
        imagee.Dispose();
        bmap.Dispose();
        bmpOut.Dispose();
        g.Dispose();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string dosyatipi = resimupload.PostedFile.ContentType;
        if (resimupload.HasFile)
        {
            if ((dosyatipi == "image/jpg") || (dosyatipi == "image/jpeg") || (dosyatipi == "image/png"))
            {
                string isim = Guid.NewGuid().ToString() + resimupload.FileName;
                resimupload.SaveAs(Server.MapPath("~/resimler/") + isim);
                resimboyutu(300, 200, Server.MapPath("~/resimler/") + isim);
                Editor1.Content += "<img src=resimler/" + isim + ">";//Resim ekleme işlemini yaptığımız kod
            }
            else
                lblmesaj.Text = "Sadece resim dosyaları yüklenebilir.";
        }
        else
            lblmesaj.Text = "Lütfen bir dosya seçiniz.";
    }

    protected void btnkaydet_Click(object sender, EventArgs e)
    {
        SqlDataSource1.InsertCommand = "INSERT INTO MakaleTablo (Mbaslik, Mkategori, Mdetay) VALUES ('"+ txtbaslik.Text +"', '"+ drplist.Text+"', '"+ Editor1.Content+"')";
        SqlDataSource1.Insert();

    }
}


AjaxControlToolkiti nerede bulabilirsiniz derseniz buyurun. İndir



Etiketler
Editor Ajax Control Toolkit Wysiwyg image resim
Mesaj Yaz