how to show json result into a bootstrap modal in mvc

Question

i have following piece of code to show the word document, i am showing the result into a text area, but doesn't know how to implement it in bootstrap modal in mvc. i am following the mentioned link can anyone help me to achieve this.

following this link

and here is my code of controller.

 public JsonResult ReadTextFile(string fName)
        {
            string retString = string.Empty;
            string path = Path.Combine(Server.MapPath("~/Media"), fName);
            if (System.IO.File.Exists(path))
            {
                if (Path.GetExtension(path) == "doc" || Path.GetExtension(path) == ".docx")
                {
                    Microsoft.Office.Interop.Word.Application word = new Microsoft.Office.Interop.Word.Application();
                    object miss = System.Reflection.Missing.Value;
                    object readOnly = true;
                    object wordPath = path;
                    Microsoft.Office.Interop.Word.Document docs = word.Documents.Open(
                        ref wordPath,
                        ref miss,
                        ref readOnly,
                        ref miss, ref miss, ref miss,
                        ref miss, ref miss, ref miss,
                        ref miss, ref miss, ref miss,
                        ref miss, ref miss, ref miss, ref miss);
                    for (int i = 0; i < docs.Paragraphs.Count; i++)
                    {
                        retString += " \r\n " + docs.Paragraphs[i + 1].Range.Text.ToString();
                    }
                }
                else if (Path.GetExtension(path) == "txt")
                {
                    using (StreamReader sr = new StreamReader(path))
                    {
                        retString = sr.ReadToEnd();
                    }
                }
            }
            return Json(retString, JsonRequestBehavior.AllowGet);
        }

score 2 · Accepted Answer · answered Apr 24 '15 at 09:50

Use an ActionLink

@Html.ActionLink("Preview", "ReadTextFile", "Marketing",
routeValues: new {  
fName = @item.Content,
},                                                               
htmlAttributes: new
{                                                                            id="btnClick1",
name = @item.Content
})

Then in Your View

<div id='loadDocument' class='modal fade in'>
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <div class="row">
                                                    <div class="col-md-10 col-sm-10">
                                                       Preview Document
                                                    </div>
                                                    <div class="col-md-1 col-sm-1 pull-right">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-body">
                                                <textarea id="txtloadData" rows="600" class="form-control"style="width:100%; height:1000px"></textarea>
                                            </div>
                                            </div>
                                    </div>
                                </div>

Add this to your bottom of the Page

<script>
    $("#btnClick1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: '@Url.Action("ReadTextFile", "Marketing")',
            data: { fName: $(this).attr("name") },
            DataType: "text",
            success: function (str) {
                $("textarea#txtloadData").val(str);
                $('#loadDocument').modal('show');
            },
            error: function (str) {
                alert("failed");
            }
        });
    });

</script>

that's all hope it will help you. if you face any problem to implement it then let me know.

score 1 · Answer 2 · edited May 23 '17 at 12:14

You will need to use JQuery to display the data or another approach is to pass a model back to the View as an ActionResult. Then in your View you display it with the HTML helper like this:

`@Html.Raw(Json.Encode(Model.Values))`

Here are 2 links that could guide you to the right solution:

How to return Json object from MVC controller to view

MVC4 - Displaying JSON result properties in view

how to show json result into a bootstrap modal in mvc

2 Answers2