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

4ashwani
 
on Mar 19, 2018 12:10 AM
11543 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Results 6 - 9 of 9
Mudassar
 
on Mar 21, 2018 05:15 AM

Change

 return Json(new {location= Url.Content(Path.Combine("~/Uploads/img/" + filename1))}, JsonRequestBehavior.AllowGet);

to

 return Json(new {location= Path.Combine("/Uploads/img/" + filename1)}, JsonRequestBehavior.AllowGet);

 

4ashwani
 
on Mar 21, 2018 06:47 AM

 

return Json(new {location= Path.Combine("/Uploads/img/" + filename1)}, JsonRequestBehavior.AllowGet);

i used this but stll getting url as same.

src="../Uploads/img/wpid-img_20141211_1018423821.jpg"

them image upload automatically add '..' this in the path.

Mudassar
 
on Mar 22, 2018 01:25 AM

You are using ne.Content but sending location object?

mukesh1
 
on Mar 29, 2018 10:55 PM

try 

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

Results 6 - 9 of 9