Display image tag content using Html.Raw in ASP.Net MVC

Last Reply on Mar 29, 2018 10:55 PM By mukesh1

Posted on Mar 19, 2018 12:10 AM

Dear Sir/Madam,

i using text Editor and putting content with image in that and then saving it in the database.but when i am showinfg that content on page then the image in the img tag is not being shown.How can i show the image in the content on page.

thanks for your help in advance.

<div class="content table-responsive table-full-width">
    <link href="~/Scripts/Uploadify/uploadify.css" rel="stylesheet" />
    <script src="~/Scripts/UPLODIFY/jquery.uploadify.min.js" type="text/javascript"></script>
    <script src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script>
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
skin: "lightgray",
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
    //image_advtab: true,
images_upload_url: '/Account/upload',
images_upload_credentials: true,
automatic_uploads: true
});
    </script>    
               @using (Html.BeginForm("AddNews", "Account", FormMethod.Post,new { enctype = "multipart/form-data"}))
               {
 
                    <table class="table table-striped">
                      <tbody>
                            <tr><td>@Html.DropDownList("newstype",new SelectList(Enum.GetValues(typeof(newsportal.Models.newstype))),new {id="ntype"})</td></tr>
                            <tr><td>Date</td><td>@Html.TextBoxFor(Model => Model.datee, new { @type = "date",paceholder="select date"})</td></tr>
                            <tr><td>Country</td><td>@Html.TextBoxFor(Model => Model.country)</td></tr>
                            <tr><td>State</td><td>@Html.TextBoxFor(Model => Model.statee)</td></tr>
                            <tr><td>City</td><td>@Html.TextBoxFor(Model => Model.city)</td></tr>
                            <tr><td>Category</td><td>@Html.DropDownListFor(Model=>Model.cat, new SelectList(Enum.GetValues(typeof(newsportal.Models.category))),"Select Category")</td></tr>
                            <tr><td>SubCategory</td><td>@Html.TextBoxFor(Model => Model.subcat)</td></tr>
                            <tr><td>URL Title(only for hindi news)</td><td>@Html.TextBoxFor(Model=>Model.urltitle)</td></tr>
                            <tr><td>Enter The News Youtube Url</td><td>@Html.TextBoxFor(Model=>Model.videourl)</td></tr>
                            <tr><td>Title</td><td>@Html.TextAreaFor(Model => Model.title)</td></tr> 
                            <tr><td>Content</td><td>@Html.TextAreaFor(Model => Model.content)</td></tr>
                            <tr><td>pic1</td><td><input name="f1" type="file" /></tr>
                            <tr><td>Writer</td><td>@Html.TextBoxFor(Model => Model.writ)</td></tr>
                            <tr><td><input type="submit" /></td></tr>
                      </tbody>
                     </table>
               }
</div>

Controller code

public JsonResult upload()
       {
           var file = Request.Files["file"];
           //string extension = Path.GetExtension(file.FileName);
           //string fileid = Guid.NewGuid().ToString();
           //fileid = Path.ChangeExtension(fileid, extension);
           var filename1 = Path.GetFileName(file.FileName);
           string locationn = Server.MapPath(@"~/Uploads/img/" + filename1);
           file.SaveAs(locationn);
           //HttpPostedFileBase f1 = Request.Files["f1"];
           //var filename1 = Path.GetFileName(f1.FileName);
           //var p1 = Server.MapPath("~/contnt/images/" + filename1);
           //f1.SaveAs(p1);
           //var pic1 = Url.Content(Path.Combine("~/contnt/images/" + filename1));
           return Json(new {location= Url.Content(Path.Combine("~/Uploads/img/" + filename1))}, JsonRequestBehavior.AllowGet);
      }

Here is the content display code

<div class="col-lg-8 col-md-8">
    <div class="content_bottom_left">
        <div class="single_page_area">
            <h2 class="">@ne.title</h2>
            <div class="single_page_content">
                <div class="post_commentbox"> <a href=@Url.Action("Home","News")><i class="fa fa-user"></i>@ne.writ</a> <span><i class="fa fa-calendar"></i>@ne.datee</span> <a href="#"><i class="fa fa-tags"></i>@ne.cat</a> </div>
                <img class="img-center" src=@ne.pic1 alt="" style="height:430px;">
                @Html.Raw(ne.content)
            
            </div>

 

Results 1 - 5 of 9 12

Posted on Mar 19, 2018 04:22 AM

Share your cshtml and controller code. So that we know how you are saving and how you are displaying


Posted on Mar 19, 2018 05:52 AM

hi

this editor view code

<div class="content table-responsive table-full-width">
    <link href="~/Scripts/Uploadify/uploadify.css" rel="stylesheet" />
    <script src="~/Scripts/UPLODIFY/jquery.uploadify.min.js" type="text/javascript"></script>
    <script src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script>
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
skin: "lightgray",
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
    //image_advtab: true,
images_upload_url: '/Account/upload',
images_upload_credentials: true,
automatic_uploads: true
});
    </script>
   
               @using (Html.BeginForm("AddNews", "Account", FormMethod.Post,new { enctype = "multipart/form-data"}))
               {

                    <table class="table table-striped">
                      <tbody>
                            <tr><td>@Html.DropDownList("newstype",new SelectList(Enum.GetValues(typeof(newsportal.Models.newstype))),new {id="ntype"})</td></tr>
                            <tr><td>Date</td><td>@Html.TextBoxFor(Model => Model.datee, new { @type = "date",paceholder="select date"})</td></tr>
                            <tr><td>Country</td><td>@Html.TextBoxFor(Model => Model.country)</td></tr>
                            <tr><td>State</td><td>@Html.TextBoxFor(Model => Model.statee)</td></tr>
                            <tr><td>City</td><td>@Html.TextBoxFor(Model => Model.city)</td></tr>
          <tr><td>Category</td><td>@Html.DropDownListFor(Model=>Model.cat, new SelectList(Enum.GetValues(typeof(newsportal.Models.category))),"Select Category")</td></tr>
                            <tr><td>SubCategory</td><td>@Html.TextBoxFor(Model => Model.subcat)</td></tr>
                           <tr><td>URL Title(only for hindi news)</td><td>@Html.TextBoxFor(Model=>Model.urltitle)</td></tr>
                          <tr><td>Enter The News Youtube Url</td><td>@Html.TextBoxFor(Model=>Model.videourl)</td></tr>
                            <tr><td>Title</td><td>@Html.TextAreaFor(Model => Model.title)</td></tr>  
                           <tr><td>Content</td><td>@Html.TextAreaFor(Model => Model.content)</td></tr>
                            <tr><td>pic1</td><td><input name="f1" type="file" /></tr>
                            <tr><td>Writer</td><td>@Html.TextBoxFor(Model => Model.writ)</td></tr>
                            <tr><td><input type="submit" /></td></tr>
                      </tbody>
                     </table>
               }
</div>

Controller code

 

public JsonResult upload()
       {
           var file = Request.Files["file"];
           //string extension = Path.GetExtension(file.FileName);
           //string fileid = Guid.NewGuid().ToString();
           //fileid = Path.ChangeExtension(fileid, extension);
           var filename1 = Path.GetFileName(file.FileName);
           string locationn = Server.MapPath(@"~/Uploads/img/" + filename1);
           file.SaveAs(locationn);
           //HttpPostedFileBase f1 = Request.Files["f1"];
           //var filename1 = Path.GetFileName(f1.FileName);
           //var p1 = Server.MapPath("~/contnt/images/" + filename1);
           //f1.SaveAs(p1);
           //var pic1 = Url.Content(Path.Combine("~/contnt/images/" + filename1));
           return Json(new {location= Url.Content(Path.Combine("~/Uploads/img/" + filename1))}, JsonRequestBehavior.AllowGet);
      }

Here is the content display code

 

<div class="col-lg-8 col-md-8">
    <div class="content_bottom_left">
        <div class="single_page_area">
            <h2 class="">@ne.title</h2>
            <div class="single_page_content">
                <div class="post_commentbox"> <a href=@Url.Action("Home","News")><i class="fa fa-user"></i>@ne.writ</a> <span><i class="fa fa-calendar"></i>@ne.datee</span> <a href="#"><i class="fa fa-tags"></i>@ne.cat</a> </div>
                <img class="img-center" src=@ne.pic1 alt="" style="height:430px;">
                @Html.Raw(ne.content)
           
            </div>

 


Posted on Mar 20, 2018 05:00 AM

Check the Path of Image coming and also check whether it is correct and Image exists.


Posted on Mar 20, 2018 10:18 AM

i am getting this url  in view
src="../Uploads/img/23376174_607988482925308_7096673049508309679_n.jpg"

but if i remove '..' these dots(using the inspect element in browser)  then the image is shown .

this is the url on which image is shown

src="/Uploads/img/23376174_607988482925308_7096673049508309679_n.jpg"


so how can i remove it when sending the url.content from controller