Passing data from partial view inside a modal to the main view and then close the modal

Question

I have a button which is defined as below in my Index.cshtml file:

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
      Add Value                    
</button>  

Clicking on button opens a modal window. My modal is defined in Index.cshtml file as below:

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Add a Value</h4>
                </div>
                <div class="modal-body">
                    @(Html.Kendo().TabStrip()
                        .Name("tabstrip")
                        .Items(ts =>
                        {

                            ts.Add().Text("Pick a school").Selected(true).LoadContentFrom(Url.Action("SchoolPartial", "Institution"));                            
                        })
                     )
                </div>
            </div>
        </div>  

Below is how my partial looks like (SchoolPartial.cshtml):

<div class="col-md-12">

                @(Html.Kendo().Editor()
      .Name("schoolEditor")
      .Tag("div")
      .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline().Strikethrough()
            .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
            .CreateLink().Unlink()
            .InsertImage()
            .TableEditing()
            .FontColor().BackColor()
      )
      .Value(@<text><p>
                <div class="container-fluid">    
                    <div class="row">
                        <div class="col-md-4">Senior School</div>
                    </div>
                </div>
            </p></text>))
</div>  

Now, a user clicks on 'Add Value' button in Index.cshtml file, 'myModal' window opens, And in 'myModal' window from 'Pick a school' tab, which loads the 'SchoolPartial' tab, I want user to be able to click on the 'Senior School' div. When user clicks on senior school div in SchoolPartial.cshtml, I want id = 2 to be passed to my Index.cshtml, which will then load the school name and address details from database and display it in Index.cshtml.

How can I achieve this behavior.

Thanks!

EDIT:

In my SchoolPartial.cshtml, to make my div clickable, I surrounded my div with anchor tag like below:

<a href="@Url.Action("RetrieveSchoolDetails", "School", new {schoolId= "2" })">
       <div class="col-md-4">senior school</div>
</a>  

Here School is my controller (SchoolController.cs) and RetrieveSchoolDetails is the action method.

This is how I am defining RetrieveSchoolDetails method:

 public void RetrieveSchoolDetails (string schoolId= null)
        {
            var schoolDetail = db.School.Where(e => e.SchoolId== schoolId).ToList();
            string Address = Convert.ToString(schoolDetail .Select(e => e.Address));
           string Name = Convert.ToString(schoolDetail .Select(e => e.Name));
            string School= Name + Address;

            ViewBag.SchoolSelection = School;
        }

Now I want, once information gets into ViewBag, I want to close the modal window, so that the selection and the ViewBag information shows up in Index.cshtml.
I am not sure, how to close my bootstrap modal from controller, so that it shows me the data in Index.cshtml.
Or may be just show me the modal and user can manually close the modal, so that ViewBag information is still there. When I run my project, after assigning value to ViewBag, the browser keeps on processing and I cannot click on my modal to close it.

Please suggest!

Thanks

EDIT 2:

I edited my code and used, div click to call javascript function, which is then using ajax to make call to controller's method - RetrieveSchoolDetails and returning partial view from that controller method.

All it is doing now is, returns a partial view with school address in full screen. i.e it is redirecting me to my partial view with the generated school address.

However I want to close the modal and then show that partial view inside of my parent page (Index.cshtml).

Below are my code additions-

Below div is in SchoolPartial.cshtml

 <div onclick="GetAddress('2')" class="col-md-4">senior school</div>  

JavaScript function

<script>
        function GetAddress(code)
        {                
                $.ajax({
                url: '/School/RetrieveSchoolDetails?schoolID=2',
                contentType: 'application/html; charset=utf-8',
                type: 'GET',
                dataType: 'html'

            })
            .success(function (result) {
                $('#npAddress').html(result);       //npAddress is id of my div inside   
                                            //Index.cshtml where I want to display the partial. 
                                           //Here I want to close the modal window 
                                           //and show Index.cshtml in it's filled state.
            })
            .error(function (xhr, status) {
                alert(status);
            })
        };

</script>  

Below is my controller method:

public void RetrieveSchoolDetails (string schoolId= null)
            {
                var schoolDetail = db.School.Where(e => e.SchoolId== schoolId).ToList();
                string Address = Convert.ToString(schoolDetail .Select(e => e.Address));
               string Name = Convert.ToString(schoolDetail .Select(e => e.Name));
                string School= Name + Address;

                ViewBag.SchoolSelection = School;
                return PartialView("_schoolAddress");
            }

Below is my _schoolAddress.chtml Partial

@ViewBag.SchoolSelection

Answer 1

First off, you don't really need to use partials here. The purpose of using partials is to put some html code in there which needs to be reused in multiple places (different pages). By putting it in one partial and then calling that partial from several pages you make your project easier to upkeep (any changes only need to be made once). But, partials add a degree of complexity that is not recommended for beginners. They can be powerful tools but lets start off with the basics and work up to that.

Second, I wouldn't use any other plugins on top of the razor (e.g. kendo). There is nothing wrong with using it but lets keep it simple for now. Plus, razor is pretty darn powerful on it's own.

I coded up some stuff for you but you'll have to fill in the gaps.

@model MyProject.Models.MyModel

<div class="">

<button type="button" class="btn btn-default" data-toggle="modal" onclick="AddValue()">
      Add Value                    
</button> 



</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add a Value</h4>
            </div>
            <div class="modal-body">
                <!-- some tabs here? -->
                <!-- put code for tabs here, don't use a partial -->
                <div onclick="GetAddress(2)" class="col-md-4">senior school</div>
            </div>
        </div>
    </div>  
</div>
<script>

    function AddValue()
    {
        $('myModal').modal();

    }

    function GetAddress(id)
    {
        $.ajax(
        {
            url: '/School/RetrieveSchoolDetails?schoolID' + id,
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            contentType: 'application/json',            
            success: function (result) {                
                $('#npAddress').text(result);                                                   
            },
            error: function (xhr, status) {
                alert(status);
            }
        });

    }


</script>

In your controller:

        public JsonResult RetrieveSchoolDetails (string schoolId)
        {
            // don't use a default null here unless you plan on handling it somehow
            // otherwise the next line would throw an error
            var schoolDetail = db.School.Where(e => e.SchoolId== schoolId).ToList();
            string Address = Convert.ToString(schoolDetail .Select(e => e.Address));
            string Name = Convert.ToString(schoolDetail .Select(e => e.Name));
            string School= Name + Address;
            // may need to format this depending on exactly what you want to return
            return Json(school);
        }

Remember, the overall learning process means starting simple and then building up to the more complex.